Question

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

正如您所看到的，正确的绿色容器要小得多，即使两者都具有柔性增长：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

使用flex：1代替flex-grow：1似乎解决了这个问题。

Answer 2

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

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

请参阅：https://jsfiddle.net/Wexcode/Lgqhcr07/

Answer 3

如果你没有为你的弹性项目（.item）指定宽度，他们的宽度是＆＃34; auto＆＃34;并且他们将适应其子元素（在您的情况下＆＃39; span＆＃39;）。

大多数flexboxes的实现都有宽度＆＃39;为他们的物品指定。

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

Answer 5

或使用flex-basis：100％; （你可以删除flex-grow：1;）

在http://www.w3.org/TR/css3-flexbox/#flex-basis处很好地解释了：

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

如果指定的'flex-basis'是'main-size'，则使用的flex基础是flex项目的main size属性的计算值。

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

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

5 个答案: