如何使 flexbox 项目大小相同？

Question

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

例如：

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

第一项比第二项大很多。如果我有 3 个项目、4 个项目或 n 个项目，我希望它们都出现在同一行上，每个项目的 space 数量相等。

有什么想法吗？

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

Answer 1

设置它们，使它们的 flex-basis 为 0（因此所有元素都有相同的起点），并允许它们增长：

flex: 1 1 0px

您的 IDE 或 linter 可能会提到 the unit of measure 'px' is redundant。如果您将其遗漏（例如：flex: 1 1 0），IE 将无法正确呈现它。所以 px 需要支持 Internet Explorer，正如@fabb;

评论中提到的

Answer 2

您可以添加 flex-basis: 100% 来实现此目的。

Updated Example

.header {
  display: flex;
}

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

尽管如此，您也可以使用 flex: 1 获得相同的结果。

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

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

Answer 3

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

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

详情： flex: 1 1 0 与 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 如果父容器不能提供足够的 space 用于每个项目加在一起的原生大小（没有 space 增长），我们需要使 width: 0 给每个项目相同的成长起点。

Answer 4

Adam (flex: 1 1 0) 接受的答案非常适用于宽度固定或由祖先确定的 flexbox 容器。您希望 children 适合容器的情况。

但是，您可能会遇到这样一种情况，即您希望容器适合 children，children 的大小基于最大的 child。您可以通过以下任一方式使 flexbox 容器适合其 children：

设置position: absolute而不设置width或right，或
将它放在包装纸中 display: inline-block

对于这样的 flexbox 容器，接受的答案 NOT 工作，children 的大小不相等。我认为这是 flexbox 的限制，因为它在 Chrome、Firefox 和 Safari 中的行为相同。

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

当您运行此片段时，请务必点击整页以正确查看效果。

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

Answer 5

我不是 flex 方面的专家，但我通过将我正在处理的两个项目的基础设置为 50% 来实现这一点。增长到 1 收缩到 0.

内联样式：flex: '1 0 50%',

Answer 6

None 这些答案解决了我的问题，即当我的临时 flexbox table 缩小到宽度太小时，项目的宽度不同。

我的解决方案就是将 overflow: hidden; 放在 flex-grow: 1; 单元格上。

Answer 7

None 这些解决方案对我有用，所以我想我会分享这些解决方案。

.header {
  display: flex;
}

.item {
  width: 100%;
}


/* Demo styles, for aesthetics. */

.demo {
  margin: 3rem;
}

.demo .item {
  text-align: center;
  padding: 3rem;
  background-color: #eee;
  margin: 0 1.5rem;
}

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
  </div>
</div>

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
  </div>
</div>

<div class="demo">
  <div class="header">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
    <div class="item">
      4
    </div>
    <div class="item">
      5
    </div>
  </div>
</div>

Answer 8

即使您 包装项目 也能正常工作，例如网格，但不是那么简单，您应该显示包装的位置媒体查询))

示例：

.flex-item{
     flex: 0 0 calc(25% - (45px / 4 ))
}

这样工作：

$n: 4; // number of columns
$gap: 15px; // margin pixels

.flex-parent{
    display: flex;
    gap: $gap;
}
.flex-item{
     flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n ) );
}

Answer 9

在 flex 的子元素上

flex: 1 1 25%

这将允许有 4 个项目如果你想添加更多项目，那么你可以减少 %

如何使 flexbox 项目大小相同？

How to make flexbox items the same size?

css

flexbox