具有 flex-grow 的相同宽度的容器不起作用答案

【问题标题】：Same width containers with flex-grow not working具有 flex-grow 的相同宽度的容器不起作用
【发布时间】：2017-09-28 09:09:52
【问题描述】：

我正在尝试使用 flex 创建相同宽度的 flex-item，但它们会根据 flex-item 中子项的数量不断改变宽度

fiddle

如您所见，右侧的绿色容器要小得多，尽管两者都有 flex-grow:1

我该如何解决这个问题？谢谢！

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

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

【问题讨论】：

标签： html css flexbox flex-grow

【解决方案1】：

使用 flex:1 而不是 flex-grow:1 似乎可以解决问题。

【讨论】：

【解决方案2】：

这是因为flex-basis 默认为auto，这会影响元素的宽度。为了保持你的元素相同，你需要显式设置flex-basis: 0：

.item {
  flex-basis: 0;
  flex-grow: 1;
}

见：https://jsfiddle.net/Wexcode/Lgqhcr07/

【讨论】：

【解决方案3】：

如果您没有为弹性项目 (.item) 指定宽度，则它们的宽度为“自动”，并且它们将调整为其子元素（在您的情况下为“跨度”）。

大多数弹性框的实现都为其项目指定了“宽度”。

【讨论】：

还有，指定弹性基础

【解决方案4】：

我认为这应该是解决方案...

span {
    flex-grow: 1;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    display: inherit;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}

<div class="container">
    <div class="item">
        <span></span>
        <span></span>
        <span></span>

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

【讨论】：

内部跨度应具有特定宽度。当我从跨度中删除 flex-grow 时，问题又回来了

【解决方案5】：

或者使用 flex-basis: 100%; (你可以去掉 flex-grow: 1;)

http://www.w3.org/TR/css3-flexbox/#flex-basis 解释得很好：

弹性基础
该组件采用与“width”属性相同的值，设置“flex-basis”的简写并指定弹性基础：弹性项目的初始主要大小，在根据弹性因子分配可用空间之前。当从“flex”简写中省略时，其指定值为 0%。

如果指定的'flex-basis'是'main-size'，则使用的flex base是flex item的main size属性的计算值。

在上面的 w3.org 网址上有一个图表，可以很容易地理解以上所有内容。值得一看。

【讨论】：

请编辑您的答案，并解释为什么这样可以解决问题。