An Interactive Guide to Flexbox
Josh W. Comeau
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨
8 Feb 2023
This is the fundamental difference between the primary/cross axis. When we're talking about alignment in the cross axis, each item can do whatever it wants. In the primary axis, though, we can only think about how to distribute the group.
That's why there's no
justify-self. What would it mean for that middle piece to setjustify-self: flex-start? There's already another piece there!
For an element containing text, the minimum width is the length of the longest unbreakable string of characters.
The Flexbox algorithm refuses to shrink a child below its minimum size. The content will overflow rather than shrink further, no matter how high we crank
flex-shrink!Text inputs have a default minimum size of 170px-200px (it varies between browsers). That's the limitation we're running into above.