flex:1 到底代表什么?

发表于 作者 jiukeshuju

今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 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, 即项目本身的大小

代码第二版

上面证实了我以前的想法, 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; 为什么能平分元素了吧, CSS 是一门很难学的语言, 虽然我经过不断试验得出结果, 但是它还有好多莫名其妙的问题去等你发现. 比如 margin: auto 为什么会实现居中, overflow: hidden 为何能实现 BFC

你可以遵从官方标准, 也可以和我一样去实验性的看待 flex: 1;

不过我建议你别深究这些问题, 因为所见即所得, 它这样能实现效果就可以了, CSS 学习是没必要刨根问底的, 会用就是最好的证明, 以上仅为个人见解, 如有疑问请给我留言或私信

发表评论