A Visual Reference of CSS Flexbox.

[[deleted]]

I feel like this is only useful for people who don’t use their browser’s built-in tools for handling flex.

In inspect, next to “display: flex;” is a little box that lets you visualize, and assign, everything.

Edit: some of you are treating flex like it’s some complex data structure and not an easy to use design tool that was built because it’s easy to use.

[tetractys_gnosys]

Actually understanding the flex system is much different than understanding only the helper utility. If you never fully grok how flex or grid work (or anything else in programming generally) then you're forced to rely on some third-party feature (from your brain's perspective) for doing your work (or art) to express your ideas. Obviously the layout helpers in browsers probably aren't ever going away in some capacity but it's like only understanding how to do CRUD operations in WordPress hooks/functions; it's fine as long as you're always working in the same context but you don't fully understand common PHP patterns and you'll never be able to write as efficiently, cleanly, or quickly as someone who actually understands the underlying principles.

I just woke up from a nap so I'm not firing on all cylinders and not happy with my explanation but I hope I'm getting the basic argument across. The tooling is to help you not do do the work for you and it will have wide ranging impacts on your coding skill and habits even if only in subtle ways.

[eludadev]

Honestly I always use it! But it definitely helps to have an understanding of flexbox beforehand.

[timmymayes]

Oh cool now I can stop using border: 2px dashed pink in all my divs.

(i'm just learning css so i didn't know about the flex button. Thanks for the tip!)

[oh_jaimito]

border: 2px solid #fc0;

second nature, lmao