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 s占据最大，相同的水平空间，即第一个中约为33％，第二个中为50％，并且最后100％。

这里的想法是不设置.item的大小（并避免将id设置为元素）以获得最大的灵活性和最小的错误表面;如果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;。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;