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

我希望所有的.items 都占据最大的、相同的水平空间，即（大约）第一个中的 33%，第二个中的 50%，最后一个中的 100%。

这里的想法是不设置大小的的.itemS（并避免设定ids到元素）为最大的灵活性和最小误差表面; 如果使用 FlexBox 无法做到这一点，但使用其他策略可以做到，请分享。

Answer 1

您可以设置width:100%;为.item（如果您希望它们占用 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>

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>