Css 如何使flexbox项目具有相同的大小？

我想使用flexbox，它有一些相同宽度的项目。我注意到flexbox将空间均匀分布，而不是空间本身

例如：

.header{
显示器：flex；
}
.项目{
柔性生长：1；
文本对齐：居中；
边框：1px纯黑；
}

asdfasdfasdfasdfasdfasdfasdfasdfasdf
Z

设置它们，使其

弹性基础
为
0
（使所有元素具有相同的起点），并允许它们增长：

flex: 1 1 0px

您的IDE或linter可能会提到
度量单位“px”是冗余的
。如果不使用它（如：
flex:11 0
），IE将无法正确呈现此内容。因此，@fabb的评论中提到，
px
需要支持Internet Explorer
 设置它们，使其
弹性基础
为
0
（使所有元素具有相同的起点），并允许它们增长：

flex: 1 1 0px

您的IDE或linter可能会提到
度量单位“px”是冗余的
。如果不使用它（如：
flex:11 0
），IE将无法正确呈现此内容。因此，@fabb的评论中提到，
px
需要支持Internet Explorer
 您可以添加
flex-basis:100%
来实现这一点


为了获得更好的效果，您还可以使用
flex:1
获得相同的结果

flex:1
的简写形式与
flex:1 10
相同，相当于：

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

您可以添加
flex-basis:100%
来实现这一点


为了获得更好的效果，您还可以使用
flex:1
获得相同的结果

flex:1
的简写形式与
flex:1 10
相同，相当于：

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}

您需要添加
width:0
，以便在项目的内容使列变大时使列相等

.item {
  flex: 1 1 0;
  width: 0;
}

您需要添加
width:0
，以便在项目的内容使列变大时使列相等

.item {
  flex: 1 1 0;
  width: 0;
}

Adam接受的答案（
flex:1 10
）非常适合宽度固定或由祖先决定的flexbox容器。您希望孩子们适合容器的情况

但是，您可能希望容器能够容纳子容器，并且子容器的大小基于最大的子容器而相同。您可以通过以下方式使flexbox容器适合其子容器：


设置
位置：绝对
且未设置
宽度
或
右侧
，或

将其放入带有
display:inlineblock

对于此类flexbox容器，可接受的答案不起作用，因为子容器的大小不相等。我认为这是flexbox的一个限制，因为它在Chrome、Firefox和Safari中的行为相同

解决方案是使用网格而不是flexbox

演示：

正常场景-子项调整以适应容器的flexbox-通过设置{flex:1 0}使子项大小相等

柔性箱
由视口确定的宽度
所有子元素的大小与{flex:1 0}相同
现在我们想让容器适合孩子们，但仍然让孩子们大小相等，基于最大的孩子。我们可以看到{flex:110}没有效果

柔性箱
内联块
我们希望所有的孩子都和这篇文章一样大
柔性箱
绝对定位
我们希望所有的孩子都和这篇文章一样大







那么让我们试试网格。啊哈！这就是我们想要的

网格
内联块
我们希望所有的孩子都和这篇文章一样大
网格
绝对定位
我们希望所有的孩子都和这篇文章一样大

正文{
边缘：1米；
}
.换行块{
显示：内联块；
}
#第0区、第1区、第2区、第3区、第4区{
边框：1px实心#888；
填充：0.5em；
文本对齐：居中；
空白：nowrap；
}
#第2部分，第4部分{
位置：绝对位置；
左：1米；
}
#div0>*、#div1>*、#div2>*、#div3>*、#div4>*{
边缘：0.5em；
颜色：白色；
背景色：海军蓝；
填充：0.5em；
}
#第0部分，第1部分，第2部分{
显示器：flex；
}
#div0>*，#div1>*，#div2>*{
弹性：110；
}
#第0课{
边缘底部：1米；
}
#第二组{
顶部：15.5em；
}
#第3部分，第4部分{
显示：网格；
网格模板列：重复（3,1fr）；
}
#第四组{
顶部：28.5em；
}
Adam接受的答案（
flex:1 10
）非常适合宽度固定或由祖先决定的flexbox容器。您希望孩子们适合容器的情况

但是，您可能希望容器能够容纳子容器，并且子容器的大小基于最大的子容器而相同。您可以通过以下方式使flexbox容器适合其子容器：


设置
位置：绝对
且未设置
宽度
或
右侧
，或

将其放入带有
display:inlineblock

对于此类flexbox容器，可接受的答案不起作用，因为子容器的大小不相等。我认为这是flexbox的一个限制，因为它在Chrome、Firefox和Safari中的行为相同

解决方案是使用网格而不是flexbox

演示：

正常场景-子项调整以适应容器的flexbox-通过设置{flex:1 0}使子项大小相等

柔性箱
由视口确定的宽度
所有子元素的大小与{flex:1 0}相同
现在我们想让容器适合孩子们，但仍然让孩子们大小相等，基于最大的孩子。我们可以看到{flex:110}没有效果

弗莱