当flex-1没有按预期工作

发表于 更新于 本文字数： 456 阅读时长 ≈ 2 分钟

写duozhuavue💚服装搜索页面时遇到了一个问题：flex 容器内，两个设置了 flex：1 的项目，最后宽度竟然不是相等的。

问题复现

样例代码

1
2
3
4
5
6
<div class="box">
  <div class="inner">One</div>
  <div class="inner">
    Two has more content xxxxxxxxxxxxxxxxxxxxxxxxxx ssssss
  </div>
</div>
1
2
3
4
.box {
  width: 300px;
  display: flex;
}
1
2
3
4
5
/* 等价于 flex: 1 1 0; */
/* 元素宽度由内容宽度决定，不一定等宽 */
.inner {
  flex: 1;
}
1
2
3
4
5
6
/* 元素宽度显式设置为0，覆盖了flex-basis: 0; ，flex-grow起作用，各个列等宽，内容可能溢出 */
.inner {
  width: 0;
  /* min-width: 0;*/
  flex: 1;
}
1
2
3
4
5
6
7
.inner {
  overflow: hidden;
  /* flex-grow起作用，各个列等宽 */
  flex: 1;
  /* 下面的代码说明，创建BFC后，内容宽度不影响容器宽度，容器宽度为0 */
  /* flex: 0 1 0; */
}

总结

  1. 水平方向的 flex 盒子，可以用来创建等高列，各个列的宽度（尺寸）不一定相等；
  2. 各个列的最终宽度由列的初始尺寸和容器的剩余可用空间共同决定；
  3. 初始尺寸由显式设置的宽度决定。如果没有显式设置宽度，则由它们的内容宽度决定。如果没有内容，则宽度为 0；
  4. flex 容器的剩余可用空间（可正可负），根据各个列的 flex-grow 和 flex-shrink 属性分配给各个列；
  5. overflow: hidden; 创建 BFC 容器后，BFC 容器内部内容的宽度不会影响容器宽度；