如何使Flexbox项目大小相同

提问者：小点点

我想使用具有相同宽度的大量项目的弹性框。我注意到 Flexbox 均匀地分配空间，而不是空间本身。

例如:

.header {
  display: flex;
}

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

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

第一项比第二项大得多。如果我有三个项目、四个项目或n个项目，我希望它们都显示在同一行，每个项目的空间相等。

有什么想法吗？

http://codepen.io/anon/pen/gbJBqM

共3个答案

匿名用户

将它们设置为它们的弹性基础为 0（因此所有元素都具有相同的起点），并允许它们增长：

flex: 1 1 0px;

您的IDE或linter可能会提到< code >度量单位“px”是多余的。如果你忽略了它(比如:< code>flex: 1 1 0)，IE将不会正确地渲染它。所以需要< code>px来支持Internet Explorer，就像@ fabb的评论中提到的那样；

匿名用户

如果项的内容使列变大，则需要添加width:0以使列相等。

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

细节：flex： 1 1 0 与 flex-grow： 1; flex-shrink： 1; flex-basis： 0; 如果父容器不能为每个项目的原生大小相加提供足够的空间（没有增长空间），我们需要使宽度：0 为每个项目提供相同的增长起点。

匿名用户

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

更新示例

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

无论如何，您也可以使用flex： 1来获得相同的结果。

flex:1的缩写与flex：1 1 0相同，相当于：

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