指定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为基础设置的初始宽度。

Flex-basis在分配剩余空间之前定义元素的默认大小，因此如果允许元素弯曲（增长/缩小），它可能不是页面宽度的50％。

我发现我经常回到https://css-tricks.com/snippets/css/a-guide-to-flexbox/寻求有关flexbox的帮助：）

Answer 2

你可以简单安静（柔性基础和宽度相似）：

＆＃13;

＆＃13;

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 */
}

＆＃13;

<div class="half"> 50% </div>
<div class="wil"> share what's left</div>
<div class="wil"> share what's left</div>

＆＃13;

＆＃13;

＆＃13;

你甚至可以把事物和无序事情包装起来以便看行为。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;