为何设置flex:1 1 auto后，标签无法均分全部可用空间？

你设置了flex: 1 1 auto但flex容器的子元素没法均分可用空间，核心原因出在flex-basis: auto这个属性上。

先看你提供的代码：

CSS代码 #

body {
  padding: 0;
  margin: 0;
}

.wrap {
position: absolute;
width: 100%;
height: 100%;
}

group {
 display: flex;
 flex-flow: row wrap;
}

group div {
background: gray;
  flex: 1 1 auto;
}

label {
  padding: 0.2em;
  display: flex;
  justify-content: center;
}

label.red {
  background: red;
}

HTML代码 #

<div class='wrap'>
  <group>
  <div>
    <label>Label 1</label>
  </div>
  <div>
    <label class='red'>Label 2</label>
  </div>
  </group>
    <group>
  <div>
    <label class='red'>Short 1</label>
  </div>
  <div>
    <label>Longer 2</label>
  </div>
  </group>
      <group>
  <div>
    <label>Triple 1</label>
  </div>
  <div>
    <label class='red'>Triple 2</label>
  </div>
    <div>
    <label>T3</label>
  </div>
  </group>
</div>

原因分析 #

flex: 1 1 auto是flex-grow:1、flex-shrink:1、flex-basis:auto的简写：

• flex-grow:1表示子元素会分配剩余空间，但分配的前提是基于自身的flex-basis大小
• flex-basis:auto意味着子元素的初始宽度由自身内容决定，内容长的元素初始宽度就大，内容短的就小

当容器有剩余空间时，每个子元素会按flex-grow的比例去分剩余空间，但因为初始宽度不一样，最后总宽度还是有差异，没法做到完全均分。比如第二个group里，"Longer 2"的label内容更长，对应的div初始宽度就比"Short 1"的div宽，即使都加了相同比例的剩余空间，最终宽度还是不一样。

解决办法 #

把flex-basis设为0%（或者0px），也就是把flex:1 1 auto改成flex:1 1 0%，或者直接写flex:1（现代浏览器中flex:1等价于flex:1 1 0%）。

修改后的CSS部分：

group div {
background: gray;
  flex: 1; /* 等价于 flex: 1 1 0% */
}

这样所有子元素的初始基准宽度都是0，剩余空间会被所有子元素按flex-grow:1的比例完全均分，不管内容长度如何，最终每个子元素的宽度都会一致。

内容的提问来源于stack exchange，提问作者eguneys