It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is
But you could also argue that purely 1D layout like this is more powerful in Flexbox, because Flexbox allows us to move those elements around easier (e.g. move them all to one side or another, change their order, space them out evenly, etc).
I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).
To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.
What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?
EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)
Advantage Flexbox
Here are 10 areas where flexbox comes out ahead of Grid (Level 1):
Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with
justify-content. Try centering this fifth item in a grid container. Not a simple matter.Aligning grid items across the entire row/column (like flex items can)
Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.
Auto margins. Flex items can be placed, packed and spaced away throughout their container with
automargins. Grid items, however, are confined to their tracks, greatly diminishing the utility ofautomargins.
Min, Max, Default – all in one. Setting the
min-width,max-widthand defaultwidthof a flex item is easy. How can all three lengths be set on a grid column or row? They can't.Setting the minimum, maximum and default length of a grid column / row
Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.
Consuming remaining space. A flex item can consume remaining space with
flex-grow. Grid items have no such function.Make grid item use remaining space like flex item with flex-grow: 1
How to make the items in the last row consume remaining space in CSS Grid?
Shrinking. Flex has
flex-shrink. Grid has... nothing.
Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such
repeat(),auto-fillandminmax(), it can't be done.
Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.
An important benefit of the inline-level container is lost in some cases. If you have a Grid layout with a dynamic number of columns – meaning you cannot set the number of columns or a width for the container – then
display: inline-griddoesn't work. All items stack in a single column. This is because the default setting ongrid-auto-columnsis one column. In at least some cases, flexbox fixes the problem.
Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.
You said:
I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.
Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.
.box {
display: flex;
flex-wrap: wrap;
}
.box>span {
border: 1px solid;
padding: 10px;
flex-grow: 1;
}<div class="box">
<span>some text very long here some text very long here </span>
<span>text here</span>
<span>A</span>
<span>B</span>
</div>This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.
Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.
It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.
Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.
Here is an example : https://drafts.csswg.org/css-align-3/
This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.
If implemented, will this make Flexbox and CSS Grid useless? I don't think so.
I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).
I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.
However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.
来源：https://stackoverflow.com/questions/55064488/what-are-the-areas-covered-by-flexbox-which-are-difficult-or-impossible-to-achie