CSS FlexBox中的强制等宽列[重复]答案

【问题标题】：Force Equal width columns in CSS FlexBox [duplicate]CSS FlexBox中的强制等宽列[重复]
【发布时间】：2018-08-20 14:42:33
【问题描述】：

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

<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 无法做到这一点，但使用其他策略可行，请分享。

【问题讨论】：

但是您当前的 CSS 是什么？ impossible with FlexBox but doable using another strategy --> 通常情况正好相反 :)
flex:1 到所有元素！这是你从 Flex tuto 中学到的最基本的东西......
flex 只是简写，flex-basis 是最准确的一种
@pkolawa whataver，flexbox 有很多方法，我提供了一个
与你实际的 HTML，它们将是相同的大小

标签： html css flexbox

【解决方案1】：

在您的项目上设置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>

【讨论】：

【解决方案2】：

您可以将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>

【讨论】：