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

Question

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

如你所见，右边的绿色容器要小得多，尽管它们都有 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;
}

Answer 1

如果您没有为弹性项目 (.item) 指定宽度，则它们的宽度为 "auto" 并且它们将根据其子元素进行调整（在您的情况下为 'span'）。

大多数 flexboxes 的实现都为它们的项目指定了 'width'。

Answer 2

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

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>

Answer 3

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

Answer 4

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

在 http://www.w3.org/TR/css3-flexbox/#flex-basis 上有很好的解释：

弹性基础
该组件采用与“width”属性相同的值，设置“flex-basis”的普通字符并指定 flex 基础：flex 项目的初始主要大小，在 free space 之前是根据弹性因素分配。当从‘flex’shorthand中省略时，其指定值为 0%。

如果指定的‘flex-basis’为‘main-size’，则使用的flex basis为flex item的main size的计算值属性。

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

Answer 5

这是因为 flex-basis 默认为 auto，这会影响元素的宽度。为了使您的元素保持一致，您需要明确设置 flex-basis: 0:

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

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

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

Same width containers with flex-grow not working

html

css

flexbox

flex-grow