指定flexbox弹性项目的宽度:宽度还是基础？

Question

说我做3个弹性柱,第一个50%,另外两个自动调整.

.half {
    flex: 0 0 auto ;
    width: 50% ;
}

要么

.half {
    flex: 0 0 50%;
}

这些似乎在功能上是相同的.是吗？

Answer 1

底部陈述相当于:

.half {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 50%;
}

在这种情况下,这是相同的,因为不允许盒子弯曲,因此保留由flex-basis设置的初始宽度.

柔性基础定义了一个元素的默认大小之前的剩余空间被分配,所以如果该元件被允许弯曲(生长/收缩)它可能不是页面的宽度的50%.

我发现我经常回到https://css-tricks.com/snippets/css/a-guide-to-flexbox/获取有关flexbox的帮助:)

Answer 2

您可以使其变得简单（弹性基础和宽度相似）：

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>

您甚至可以包裹事物和混乱事物以查看行为..

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>