CSS 指定 flexbox flex 项目的宽度：宽度还是基础？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36342921/
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
Specifing width of a flexbox flex item: width or basis?
提问by Doug Cassidy
Say I'm doing 3 flex columns, first one 50%, the other two auto adjust.
假设我正在做 3 个 flex 列，第一个 50%，另外两个自动调整。
.half {
flex: 0 0 auto ;
width: 50% ;
}
or
或者
.half {
flex: 0 0 50%;
}
These seem to be functionally the same. Are they?
这些似乎在功能上是相同的。他们是吗？
回答by Charlie Frater
The bottom statement is equivalent to:
底部语句等效于：
.half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
Which, in this case, would be equivalent as the box is not allowed to flex and therefore retains the initial width set by flex-basis.
在这种情况下，这相当于盒子不允许弯曲，因此保留了由 flex-basis 设置的初始宽度。
Flex-basis defines the default size of an element before the remaining space is distributed so if the element were allowed to flex (grow/shrink) it may not be 50% of the width of the page.
Flex-basis 在分配剩余空间之前定义元素的默认大小，因此如果允许元素伸缩（增长/缩小），它可能不会是页面宽度的 50%。
I've found that I regularly return to https://css-tricks.com/snippets/css/a-guide-to-flexbox/for help regarding flexbox :)
我发现我经常返回https://css-tricks.com/snippets/css/a-guide-to-flexbox/寻求有关 flexbox 的帮助 :)
回答by G-Cyrillus
you can make it quiet simple (flex-basis and width are quiet similar):
你可以让它安静简单（flex-basis 和 width 安静相似）：
body {
display:flex;
}
div {
border:solid;
}
.half {
width:50%;/* do not mind flex, just set a width if that speaks to you and older browsers */
}
.wil {
flex:1;/* will spray evenly in room left . flex-basis is here auto */
}<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>you may even wrap things and disorder things to see behaviors ..
你甚至可以把东西包起来，把东西弄乱来看看行为..
body {
display:flex;
flex-wrap:wrap;
}
div {
border:solid;
}
.half {
width:50%;/* do not mind flex, just set a width if that speaks to you */
}
.wil {
flex:1;/* will spray evenly in room left , flex-basis is here auto you can use min and max size to make it a bit more flexible */
min-width:20%;/* set a min-width*/
max-width:450px; /* and also a max-width */
}<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<!-- lets see how it behaves when wrapping withiut real order -->
<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>
<div class="half"> 50% </div>
<div class="wil"> share what's left</div>It can matter when min-width or max-width is also to be used.
何时还使用 min-width 或 max-width 可能很重要。
