flex:1 代表什么

参考：https://zhuanlan.zhihu.com/p/136223806

代码1

<div class="container">
  <div class="div">我是一个div</div>
  <div class="div">我是一个很多字div</div>
  <div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
  display: flex;
}
.div{
  border: 1px solid red;
  flex: 1;
}
</style>

图片说明

利用 flex: 1; 确实实现了三个不同内容的 div 平分空间，所以按我以前的想法来说:

flex: 1; === flex: 1 1 auto;

这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)

  • 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  • 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  • 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

代码2

flex:1; 就是代表均匀分配元素, 但是我们来改成完整写法看看

/* 其他代码没有变化, 沿用上面的 */

.div{
  border: 1px solid red;
  flex: 1 1 auto; 
}

图片说明

加入原来以为正确的完整代码后可以看到三个元素没有均分, 所以可以推出:

flex: 1; !== flex: 1 1 auto;

走到这我就一头雾水, 为什么和我以前想的完全不同, 于是我就去参照了 w3c 对于 flex 的解释, 官方明确指, flex 最后一个参数为 0

所以:

  • flex: 1; === flex: 1 1 0;

但是在 chrome 浏览器上设置 flex: 1 1 0; 时, 它会自动加一个单位 px

图片说明

而设置 flex: 1; 时, 它会自动加一个 %, 看来他们解析到浏览器的时候必须带一个单位

图片说明

于是我就又做了几个实验, 改了一下 flex-basis 的参数, 得出以下结论

  • flex: 1; === flex: 1 1 任意数字+任意长度单位;

可以看出最重要的一点在 第三个参数 flex-basis 上, 我们再来回顾以下 这个属性的作用

flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况

那我们如果随便设置一个其他带有长度单位的数字呢, 那么他就不会按项目本身来计算, 所以它不关心内容, 只是把空间等比收缩和放大

现在你知道 flex: 1; 为什么能平分元素了吧。

小结

小结：平分元素