Flexbox is extremely useful in layout in modern web design. However, one thing it’s not good at vertically aligning wrapped text in some circumstances. Returning to the example I detailed last week, the solution works really well when the text for both links is the same length, but when the text of one link wraps but not the other, the result is out of alignment:
It also means that designers have an enhanced ability to easily re-order the elements they’ve crafted for a page. Unfortunately, the vast majority of flexbox support documentation is technical, and aimed towards developers. This series aims to correct that.
One of the most notoriously difficult parts of the CSS flexbox spec to understand is the eponymous
flex property, which uses cryptic values like
1 1 auto. Confusion only deepens when the designer discovers that
flex is merely a shortcut for properties with even stranger names like
Most explanations of the flexbox spec are fairly technical and dense, with few concessions to visual thinkers. After struggling with the properties and values, I realized that these aspects of flexbox are actually talking about visual weight.