我想使用Flexbox，有一些项目，都是相同的宽度。我注意到Flexbox均匀地分配空间，而不是空间本身。
例如:
.header { 显示:flex; ｝ .item { flex-grow: 1; text-align:中心; 边框:1px纯黑色; ｝ < div class = "头" > < div class = "项目" > asdfasdfasdfasdfasdfasdf < / div > z < div class = "项目" > < / div > < / div >
第一项比第二项大得多。如果我有3个项目、4个项目或n个项目，我希望它们都出现在同一行上，每个项目的空间相等。
什么好主意吗?
http://codepen.io/anon/pen/gbJBqM
当前回答
如果项的内容使列变大，则需要添加width: 0以使列相等。
.item {
flex: 1 1 0;
width: 0;
}
细节: Flex: 1 10和 flex-grow: 1;flex-shrink: 1;flex-basis: 0; 如果父容器不能为每个项的本地大小相加提供足够的空间(没有空间增长)，我们需要将宽度设为:0，以给予每个项相同的增长起点。
其他回答
这些解决方案对我来说都没用，但这个奏效了:
.header { display: flex; } .item { width: 100%; } /* Demo styles, for aesthetics. */ .demo { margin: 3rem; } .demo .item { text-align: center; padding: 3rem; background-color: #eee; margin: 0 1.5rem; } <div class="demo"> <div class="header"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> </div> </div> <div class="demo"> <div class="header"> <div class="item"> 1 </div> <div class="item"> 2 </div> </div> </div> <div class="demo"> <div class="header"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> <div class="item"> 5 </div> </div> </div>
设置它们的弹性基数为0(这样所有元素都有相同的起点)，并允许它们增长:
flex: 1 1 0px;
您的IDE或linter可能会提到度量单位“px”是多余的。如果你省略了它(比如:flex: 11 10)， IE将不会正确地渲染它。所以px需要支持Internet Explorer，正如@fabb的评论中提到的那样;
你可以添加弹性基础:100%来实现这一点。
更新的例子
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
无论如何，您也可以使用flex: 1来获得相同的结果。
flex: 1的简写与flex: 11 10相同，相当于:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
如果项的内容使列变大，则需要添加width: 0以使列相等。
.item {
flex: 1 1 0;
width: 0;
}
细节: Flex: 1 10和 flex-grow: 1;flex-shrink: 1;flex-basis: 0; 如果父容器不能为每个项的本地大小相加提供足够的空间(没有空间增长)，我们需要将宽度设为:0，以给予每个项相同的增长起点。
这些答案都没有解决我的问题，那就是当我的临时折叠桌子被缩小到太小的宽度时，它们的宽度就不一样了。
对我来说，解决方案很简单:隐藏溢出;关于flex-grow: 1;细胞。
