[brigadier132]

I'll be a little more helpful since I wrote a one liner without really explaining anything...

One explanation people like to give is:

CSS Grid is for layouts in 2 dimensions, Flexbox is for layouts along one dimension.

Which can be confusing because you absolutely can use Grid for layouts along one dimension too.

Here is my stupid sounding rule of thumb that I think is more useful: If you want a grid layout use grid, if you want a flexible layout use flexbox.

Grid quite literally splits the area into a grid but what if you want to just say "I want these two elements to be as far apart as possible within the container they are in" (ie a navbar, you want the logo on the left about 20 pixels away from the left of the viewpoert and you want the actual navigation to be on the right with the rightmost element 20px away from the right of the viewport). Flexbox is better for that.

[nicoburns]

I do often end up using Flexbox for 1-dimensional layouts, but IMO Grid's fr units are a lot more intuitive than Flexbox's combination of flex-basis/flex-grow/flex-shrink. If CSS added a 1-dimensional layout mode based on these principles then I'd switch to it in a heartbeat.

(I'm considering proposing one myself).

[jakear]

What bugs me the most is Flex centering absolutely sucks at handling overflow. Have a flex box with content that is supposed to be centered? Great, looks perfect for the first few items. But then try it on a smaller window or with more items and the content overflowing to the left of the border will be entirely inaccessible.

Allowing scrolling both ways would have been perfect. Switching to left-aligned when content overflows would be acceptable. But completely prohibiting access to half the content when an overflow occurs? Absolutely asinine.

I believe there may be ways to get around this with layers of inner divs and weird `overflow: ` incantations, but that's exactly the kind of bullshit flex was supposed to solve.

See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items. If you need to enable a "safe" mode to prevent data loss, and that isn't supported on any mainstream browsers... you fucked up.