Hacker News Reader

Comment by rossy | Hacker News Reader

flex-wrap. flexbox is one-dimensional, so it can "wrap" items that don't fit to the next line. The wrapped items don't have to line up with vertical grid lines, like they would in a grid, and they can be stretched or centred to fit across the full width of the parent.

View on HN

How that is different from a sequence of display:inline-block's (horizontal wrap) and multi-col layout (vertical wrap)?

inline-block isn't designed for layout - so you get side effects like the preservation of whitespace which you have to use hacks to resolve. Sure it works - but flex-wrap is a syntactically correct solution that doesn't require hacks.

I assume you're talking about CSS columns? Again they're not designed for layout - it's designed specifically for newspaper style columns of text where it doesn't matter which piece of text flows into which column. To use it for layout requires hacks or luck to adhear closely to designs. Pre-grid and flex I spent many hours of my life dealing with oddities around CSS columns - my life is in a much better place now not having to resort to it!

Like I said, stretching and centering. The justify-content property works on each row of a flexbox, so you can have a flexbox full of items with different initial sizes, automatically wrap the items that don't fit to multiple rows, and distribute the space around each item evenly. You can't do this with flow layout.

Reply on news.ycombinator.com