Flexbox覆盖的区域，很难或不可能通过网格实现 [英] Areas covered by Flexbox which are difficult or impossible to achieve with Grid

问题描述

疯狂地强调了Flexbox适用于1-D，而Grid适用于2-D，但我还没有找到清楚的解释，为什么不能将Grid用于1-D并取代Flexbox. 我最近到的是

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

但是您也可能会争辩说，像这样的纯粹一维布局更有效 在Flexbox中功能强大，因为Flexbox允许我们移动这些元素 周围更容易(例如，将它们全部移到一侧或另一侧，更改它们的位置 命令，将它们均匀地隔开，等等).

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).

我使用Grid和Flexbox进行基本布局:框在页面上的一般放置以及一些动态的(通常是堆叠的).美观的(烤面包机，模态等)是通过框架进行管理的. 我还没有发现Grid无法立即替换Flexbox的情况(那是没有高级CSS技巧或大量代码的情况).

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).

以上述引用为例，提到的所有动作"都可以在Grid中直接使用，通常具有与Flexbox相同的语义.

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.

Flexbox涵盖哪些难以或无法使用Grid管理的基本领域?

对浏览器的支持并不重要(我只使用常绿的浏览器，并且可以在需要时进行切换)

the browser support is not important (I only use evergreen browsers and can switch if needed)

推荐答案

Advantage Flexbox

在以下13个区域中，flexbox排在网格(第1级):

1. 使包裹的物品居中.想象一下五个元素.每行只有四个.第五卷包装.在flex容器中，可以使用justify-content轻松地在整个行中对齐第五行.尝试将第五项居中放置在网格容器中.这不是一件简单的事情.

1. Centering wrapped items. Imagine five elements. Only four per row. The fifth one wraps. In a flex container, 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.

• 在整个行/列中对齐网格项目(例如弹性项目可以)

如何在CSS网格的最后一行中居中放置元素?

如何抵消网格项目，同时也改变其同级兄弟?

我可以在CSS网格中每行显示不同数量的列吗?

---

1. 包装.长度可变的Flex项目没有包装问题.尝试获取可变长度的网格项目以进行包装.不可能.

1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.

• 如何获取不同长度的网格项进行包装?

---

1. 自动边距.可以在整个容器中以auto边距放置，包装和分隔Flex项目.但是，网格项目仅限于其轨迹，大大降低了auto边距的用途.

1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.

• 自动边距能否像在Flexbox中一样在CSS网格中工作?

---

1. 最小值，最大值，默认值– 轻松设置弹性项目的min-width，max-width和默认width.如何在网格的列或行上设置所有三个长度?他们不能.

1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.

• 设置网格列/行的最小，最大和默认长度

---

1. 粘性页脚/页眉.使用flexbox固定页脚或页眉非常简单，容易.

1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.

• 如何在CSS网格布局中添加页脚?

---

1. 消耗剩余空间.弹性项目可以使用flex-grow消耗剩余空间.网格项目没有这种功能.

1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.

• 在整个行/列中对齐网格项目(例如弹性项目可以)

使网格项使用具有flex-grow的弹性项(如flex项)使用剩余空间:1

如何使最后一行中的项目占用CSS网格中的剩余空间?

如何使CSS Grid的最后一行占用剩余空间

在CSS网格中隐藏左列

如何获得具有可变列数的网格布局的grid-template-columns效果?

CSS fr/小数位数最小值太大

---

1. 收缩. Flex具有flex-shrink.网格什么都没有.

1. Shrinking. Flex has flex-shrink. Grid has... nothing.

• 收缩网格项目，就像CSS中的弹性项目

---

1. 在动态布局中限制列数.使用flexbox，创建一个环绕的两列网格，并在整个屏幕尺寸上固定为两列，这是没有问题的.在Grid中，尽管具有所有出色的功能，例如repeat()，auto-fill和minmax()，但它无法完成.

1. 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-fill and minmax(), it can't be done.

• 使CSS网格仅自动填充2列

没有媒体查询的CSS网格最大列

---

1. 在第一和最后一项之间创建空间.在具有可变列数的网格容器中，添加空的第一和最后一列并不容易.边距，填充，列和伪元素都有其局限性.使用flexbox非常简单.

1. 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.

• 在第一个和最后一个网格项之前和之后添加空间

---

1. 在某些情况下，内联级容器的一项重要好处会丢失..如果您的网格布局具有动态的列数，表示您无法设置容器的列数或宽度–那么display: inline-grid不起作用.所有项目都堆叠在一个列中.这是因为grid-auto-columns的默认设置是一列.至少在某些情况下，flexbox可以解决问题.

1. 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-grid doesn't work. All items stack in a single column. This is because the default setting on grid-auto-columns is one column. In at least some cases, flexbox fixes the problem.

• 如何使网格容器缩小以适合内容?

---

1. 获取包含作者定义的网格区域的列以进行包装而无需媒体查询.假设您有一个两列网格，其中包含已设置位置的网格区域，并且希望该网格自动在较小的屏幕上转换为单列(第二列在第一列下方).使用网格，您将需要进行媒体查询. auto-fill和auto-fit函数将不起作用，因为已经指定了网格区域的位置.如果您想避免媒体查询，请使用flexbox的flex-wrap函数.

1. Getting columns with author-defined grid areas to wrap without media queries. Let's say you have a two-column grid containing grid areas that have set locations, and want the grid to automatically transition to a single column (with the second column wrapping below the first) on smaller screens. With grid, you would need a media query. The auto-fill and auto-fit functions will not work because the locations of grid areas have been specified. If you want to avoid a media query, flexbox's flex-wrap function may be useful.

• 两列网格应换成一列网格

---

1. CSS网格中没有column-reverse函数.不能将规则应用于网格容器，而从底部开始填充容器.但是，使用flexbox，使用flex-direction: column-reverse即可轻松完成任务.

1. There is no column-reverse function in CSS Grid. Getting items to populate a container starting from the bottom isn't possible with a single rule applied to the grid container. With flexbox, however, the task is simple with flex-direction: column-reverse.

• 从CSS网格的底部开始填充单元格

---

1. 网格项的resize属性对轨道没有影响.除非将列或行轨道设置为auto(基于内容的大小)，否则请重新设置网格项将使轨道溢出.由于 flexbox没有列和行轨道，因此它可能是一个有用的选择.

1. The resize property on a grid item has no effect on the track. Unless a column or row track is set to auto (content-based sizing), resizing a grid item will overflow the track. Since flexbox doesn't have column and row tracks, it may be a useful alternative.

• 网格项目的调整大小属性会导致其他网格项目重叠

这篇关于Flexbox覆盖的区域，很难或不可能通过网格实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！