flex 是 flex-grow flex-shrink flex-basis 的简写

flex-grow flex-shrink flex-basis 其实平时很少用到，一般都直接用简写 flex，如 flex: 1;

flex 其实是 flex-grow flex-shrink flex-basis 的简写，默认值对应是 0 1 auto

这几个值究竟是什么意思？flex: 1; 又是什么意思？一直以来我也是一知半解，只知道怎么用来实现一些布局，但不知道其实际的意义，今天看了下，自己动手写了几个例子，理解了！

下面用简单的描述加上代码实例解释下这几个属性，相信很容易理解

flex-basis

说人话就是元素大小，如果是 横向排列，flex-basis 相当于 width ，如果是 纵向排列，相当于 height， 默认值是 auto

例子

<div class="flex-box">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
</div>

.flex-box {
  width: 400px;
  border: 1px solid red;
  height: 400px;
  display: flex;
}

.flex-item1, .flex-item2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.flex-item1 {
  flex-basis: 200px;
}

.flex-item2 {
  flex-basis: 50px;
}

该例子中 flex-box 默认是横向排列，宽高设置为 400px，里面有两个子元素，宽高都是 100px。

然后修改 flex-item1 flex-item2 的 flex-basis，分别为 200px 50px

如上所述，flex-box 横向排列时，子元素的 flex-basis 相当于 width，所以修改完后 flex-item1 的宽度变成 200px， flex-item2 的宽度变成 50px

如果是 flex-box 纵向排列，则 flex-basis 对应 height

flex-grow

理解这个之前要先理解剩余空间的概念，假设有一个 flex-box 宽度为 400px，里面有两个子元素，宽度都是 100px ，那么剩余空间就是 400-100-100 = 200px

再如上例，flex-basis 相当于宽度，flex-box 宽度为 400px ，设置 flex-item1 的 flex-basis 为 200px，设置 flex-item2 的 flex-basis 为 50px，则剩余空间为 400-200-50 = 150px

flex-grow 就是将剩余空间分配给子元素的比例，默认值是 0，也就是剩余空间不分配，多大就是多大

这个分配比例的计算比较简单，看几个例子就懂，也可以参考 这篇文章

例子

<div class="flex-box">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
</div>

.flex-box {
  width: 400px;
  border: 1px solid red;
  height: 400px;
  display: flex;
}

.flex-item1, .flex-item2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.flex-item1 {
  flex-grow: 1;
}

.flex-item2 {
}

该例子中 flex-box 宽度为400px， flex-item1 flex-item2 宽度都为 100px ，则剩余空间为 200px

将 flex-item1 的 flex-grow 设置为 1，flex-item2 不设置，则会将剩余空间 200px 全部分配给 flex-item1

于是 flex-item1 的宽度变成 300px， flex-item2 还是 100px

如果flex-item1 flex-item2 都将 flex-grow 设置为1， 则将剩余空间 200px 平分到这俩元素上，这俩都变为 200px

.flex-item1 {
  flex-grow: 1;
}

.flex-item2 {
  flex-grow: 1;
}

如果将 flex-item1 的 flex-grow 设置为2，flex-item2 设置为 1

则剩余空间 200px 的三分之二会分配到 flex-item1 ，三分之一则分配到 flex-item2

flex-item1 宽度变为 233px ，flex-item2 变为 167px

这就是比例

.flex-item1 {
  flex-grow: 2;
}

.flex-item2 {
  flex-grow: 1;
}

同理，如果是纵向排列，则会将纵向剩余空间分配到高度上

flex-shrink

flex-shrink 是子元素的收缩比例，当子元素的宽度超出了 父flex-box 的宽度时就会起作用

flex-shrink 默认值是 1， 0 是不收缩

这个收缩比例的计算相对 flex-grow 来说要复杂，可以参考 关于flex-shrink如何计算的冷知识

例子

<div class="flex-box">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
</div>

.flex-box {
  width: 400px;
  border: 1px solid red;
  height: 400px;
  display: flex;
}

.flex-item1, .flex-item2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.flex-item1 {
  flex-basis: 200px;
  flex-shrink: 1;
}

.flex-item2 {
  flex-basis: 300px;
  flex-shrink: 0;
}

flex-box 的宽度是 400px，flex-item1 flex-item2 由于设置了 flex-basis，所以宽度分别是 200px 和 300px，此时子元素宽度已经超出 flex-box 100px 了

flex-item1 的 flex-shrink 是 1，说明它可以收缩，flex-item2 则是 0 ，不可以收缩

所以这时 flex-item1 会收缩 100px（这个值的计算参考上述链接），由原本的 200px 变成 100px ，flex-item2 不收缩，则是 300px

同理，如果是纵向排列，则会再在度上进行收缩

flex: 1

理解了上面三个属性后，flex: 1 就容易理解了

flex: 1; 相当于 flex: 1 1 0;

也就是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 剩余空间分配比例为 1，缩小比例为 1，大小为 0

意思是将元素大小设置为 0，在此基础上进行伸缩（给它分配剩余空间或者缩小）