3 ms·
I use both flexbox and grid layout together. They are not comepting, merely completing each other. Grid can do things Flexbox can't do. Flexbox can do things Gr
by roneythomas6 9y ago
I use both flexbox and grid layout together. They are not comepting, merely completing each other. Grid can do things Flexbox can't do. Flexbox can do things Grid can't do.
- c-smile 9y ago"Flexbox can do things Grid can't do" For example?
- rossy 9y agoflex-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.
- c-smile 9y agoHow that is different from a sequence of display:inline-block's (horizontal wrap) and multi-col layout (vertical wrap)?
- jonnyscholes 9y agoinline-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.
- jonnyscholes 9y agoI 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!
- rossy 9y agoLike 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.