What can flexbox do that grid can’t?

[keithjgrant]

The comparison of “one-dimensional” flexbox to “two-dimensional” grid is helpful, but it makes it seem like grid is a superset of flexbox, which seems to me an over simplification.

My question is: what can flexbox do that grid can’t? Or perhaps, what sorts of things are simpler to do with flexbox than with a one-track grid? The power of flex-shrink comes to mind, but surely there’s more to it than just that.

[rachelandrew]

I've never described grid as a superset of flexbox, the 1d vs 2d explanation is as in the specification (https://drafts.csswg.org/css-grid/#intro), and is correct. In most use cases where people are using flexbox for grid like stuff they are battling with trying to make flexbox 2d.

You can look at it another way if the 1d versus 2d thing doesn't work for you.

Flexbox works from the content out. I have a bunch of stuff and I want to arrange it in a row or column, let the content make most of the decisions about how much space it needs.

Grid works from the layout in. I'm creating a layout, I'm then putting things into that structure. There is some ability to create tracks which respond to size of content but that is going to change the whole track.

So in general, if I have stuff i just want to be equally spaced, or just all line up, irrespective of the size it is. That's flexbox. If I want to create a layout and place stuff in it, that's Grid. When people try and make flexbox work like a grid they essentially have to disable a lot of the inherent properties of flexbox to do that, those people need grid.

[keithjgrant]

That’s a great way to put it. Very helpful distinction. Thanks :)

[boazrymland]

I still have this original question unanswered. I understand that some use cases are easier to implement in Flexbox than in CSS Grid, I understand that the two are different and more suitable in different usages, but still - is there anything Flexbox can do and CSS Grid cannot? (even if more cumbersomely).

Why am I asking? Since I think that in some cases at least, a newcomer to those new tools would be better off with CSS Grid (only) for layouting (and even for most use cases of "ordering content") and could save the extra time it takes to learn and use Flexbox (without bugs and other impediments). Would you agree with that?

Thanks!

[dereklin]

I am wondering the same thing. When css grid is supported, what are the reasons to use flexbox? For example, the following achieve the same result:

header {
  grid-area: header;
  display: grid;
  justify-content: center;
}

header {
  grid-area: header;
  display: flex;
  justify-content: center;
}

Should we just use grid since we use grid in most places? Should we use flex because flex is a simpler (one dimensional) concept?...

[zxti]

From my experience with the two, the only thing I've found so far that flexbox can do that grid cannot is flex-direction: row-reverse/column-reverse. You can use grid-auto-flow: column which gives grid auto-placement column-wise wrapping just like flexbox, but you can't reverse the order of a dynamic set of auto-placed children.

This feature is wholly unimportant to me personally, though (and I would hazard, for many others). Would love to know if there's any other more meaningful capability unique to flexbox, beyond this one.

(There are of course many more things grid can do which flexbox cannot.)

[zxti]

Immediately after posting, I realized an obvious huge difference between the two: grid requires all wrapped items to be aligned according to the grid, while flexbox's wrapping allows each row (or column) to be completely unaligned and purely content-sized.

[boazrymland]

Immediately after posting, I realized an obvious huge difference between the two: grid requires all wrapped items to be aligned according to the grid, while flexbox's wrapping allows each row (or column) to be completely unaligned and purely content-sized.

If I understood you correctly then I think that this is not true and Grid allows very flexible and customizable setups, including minmax() usage, automatic new rows/columns and other goodies. I'm not too experienced with Grid to give a concrete example.