在CSS Flexbox中强制等宽列

Question

我不认为我尝试做的事情是可能的。

（这句话涉及个人看法，如需更准确翻译，需要提供更多上下文信息。）

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

如何使所有的.item元素占据相同的水平空间，分别为第一个元素的大约33%，第二个元素的50%，最后一个元素的100%？

这里的思路是不设置.item元素的大小（并避免给元素设置id）以获得最大的灵活性和最小的错误表面。如果使用Flexbox无法实现，但可以使用其他策略，那么应该采用什么策略呢？

- yPhil

---

但是你现在的CSS是什么？使用FlexBox可能不可能，但可以使用另一种策略完成。通常情况下恰恰相反 :) - Jeremy Thille

将 flex:1 应用于所有元素！这是您从 Flex 教程中学到的非常基本的内容... - Temani Afif

flex只是一种简写方式，而flex-basis则是最准确的。 - pkolawa

@pkolawa 无论如何，使用 flexbox 有很多方法，我提供了其中一种。 - Temani Afif

使用您实际的HTML，它们将具有相同的大小。 - Temani Afif

Answer 1

你可以将.item设置为width: 100%;（如果你想让它们占据100%的空间，请删除边距）：

.row {
  display: flex;
  flex-flow: row;
}

.item {
  background-color: teal;
  padding: 20px;
  width: 100%;
  margin: 10px;
}

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

- aMJay

Answer 2

在您的项目上设置flex-grow: 1;。

.row {
  height : 30px;
  border : blue dashed 1px;
  display: flex;
}

.item {
   border : green solid 2px;
   flex-grow: 1;
}

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

- Jeremy Thille

---

flex-grow 最终会导致 div 的宽度因内容而异。最合适的方法是使用 width:100%;。 - Xander Selorm