CSS 关于显示：-webkit-box; -webkit-box-flex:1
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6673555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
something about display:-webkit-box; -webkit-box-flex:1
提问by pigcan
Try to imagine a situation
试着想象一种情况
there is a div and inside the container there are three divs ,
有一个 div，容器内有三个 div，
and sometimes we need to let the inside divs self-adaption.
有时我们需要让里面的div自适应。
like this
像这样
css:
css：
.a{display:-webkit-box;width:300px;height:100px;background:#222}
.a div{-webkit-box-flex:1;height:100px}
.a-1{background:red}
.a-2{background:yellow}
.a-3{background:blue}
html:
html：
<div class="a">
<div class="a-1">abc</div>
<div class="a-2">abcdddd</div>
<div class="a-3">abcdddddddde</div>
</div>
but a-1 ,a-2 , a-3 do not self-adaption .i mean a-1 a-2 a-3 do not equal in length. it seems also depends on the text length.
但是 a-1 ,a-2 , a-3 不自适应。我的意思是 a-1 a-2 a-3 的长度不相等。这似乎也取决于文本长度。
how solve?
怎么解决？
回答by oprimus
Looks like you have misunderstood the purpose of the flexible box layout. It works by taking the unused space in the containing element and adding into its children. So for example if your containing box is 300px, and you have three elements originally 80px, 100px, and 60px, then you have 300-80-100-60 = 60px. Then if your three child elements all have a flex value of 1 then it allocates 60/(3*1) = 20px to each. So the child sizes are now 100px, 120px, and 80px.
看起来您误解了灵活框布局的目的。它的工作原理是获取包含元素中未使用的空间并将其添加到其子元素中。因此，例如，如果您的包含框是 300px，并且您有三个元素最初是 80px、100px 和 60px，那么您就有 300-80-100-60 = 60px。然后，如果您的三个子元素的 flex 值都为 1，那么它会为每个元素分配 60/(3*1) = 20px。所以子尺寸现在是 100px、120px 和 80px。
For your example, as you want them equal sizes, you should make the -webkit-box-flex to 0 for all three children, but set their width (or height if appropriate) to 33.33% each.
对于您的示例，由于您希望它们的大小相同，您应该将所有三个孩子的 -webkit-box-flex 设置为 0，但将它们的宽度（或高度，如果合适）分别设置为 33.33%。
回答by gcallaghan
I have occasions where I do not know the number of elements that will be within an element, but I still want them to be layed out evenly. For instance if I had 3 elements their width would be 33%, but for 4 elements the width would be 25%. To get around this I set the width to 1% first, then set flex to 1.
我有时不知道元素内的元素数量，但我仍然希望它们均匀排列。例如，如果我有 3 个元素，它们的宽度将为 33%，但对于 4 个元素，宽度将为 25%。为了解决这个问题，我首先将宽度设置为 1%，然后将 flex 设置为 1。
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}
.flex-element {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
width: 1%;
}
回答by Mutahhir
I think you need to add display: -webkit-boxto .a div{-webkit-box-flex:1;height:100px}
我认为你需要添加display: -webkit-box到.a div{-webkit-box-flex:1;height:100px}
