Flex

Flexbox's are a pain to write, Flex makes it easy.

#1 Product of the DayMay 13, 2019
Flexbox's are cool, but a pain in the dairy air to write. Flex makes it easy. Generate CSS to quickly make grids, columns, just about whatever you could think of, all thanks to the wonders of Flexbox.
Reviews
  • Samuel Polat
    Samuel PolatCEO @ Calico
    Pros: 

    It just works & there are many customization options.

    Cons: 

    Website has a weird scrolling issue.

    Table-rows, divs and flexboxes make me really anxious. This really saved me a lot of time; super helpful!

    Samuel Polat has used this product for one day.
  • Juan Camilo Sierra
    Juan Camilo SierraDev who enjoys thinking/making tools
    Pros: 

    Easy to use. Solves a common problem

    Cons: 

    It could include other flex properties

    I hope this would be maintained in the long term

    Juan Camilo Sierra has used this product for one day.
Discussion
Flexbox isn't hard. There are like 11 properties in total to learn. You can probably do away with half of those on any given feature you are making. Lets promote teaching people proper CSS instead of copy & paste hacks that continue to haunt the CSS community.
@vladshap I think you're missing the point here, Vlad. This tool is a great way to visualize how Flexbox works while still learning the proper syntax.
@vladshap Like @hustlinhack said, yeah its primarily just about visualisation. Prior to building this css myself I was using a Flowchart on a PDF in order to write a Flexbox and instead wanted to visualise this with my own code.
Great thing, thanks. Only suggestion would be putting everything on one site. It's scrolling somehow badly sometimes.
@ariel_jedrzejczak Gday, yeah I noticed that too when jumping into Safari, i've pushed a fix out!
@ariel_jedrzejczak Ya I straight up thought the site was broken when I first entered it. I was trying to scroll on the middle pane and nothing was happening. Even after seeing the arrow I clicked on the arrow thinking it would do something. I didn't realize I had to click on the left side and then start scrolling til I saw this comment and realized I needed to keep scrolling somewhere to make it work. Maybe make it scroll a little bit for the user if they click that pulsing arrow to show them the left panel scrolls.
@ariel_jedrzejczak @tm0neys Yep same here? Maybe if they click the bouncing arrow push the page. Also a bouncing arrow does not really indicate scroll all too much :P
Nice idea! Let me make 1 suggestion though: Making a selection in a drop down menu triggers a "startDrag" (or something) on OSX Safari, which makes the flow go haywire.
@olivierjanssen Gday, yeah it seemed to buggering up for me too, guess I can't rely on new CSS values. Heh.
This is a beautiful website, nicely done!
This is magnificent and trumps all the other flex box tools I've used.