CSS3-flex弹性布局之flex属性

前置

flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（flex：1 ）如就给容器内部项目设置的属性。

<div id="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。接下来我们逐一介绍这三个属性:

1. flex-grow
2. flex-shrink
3. flex-basis

flex-grow

flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。

<div id="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

:root {
  background-color: #fff;
  --border: 1px solid #ccc;
  --dashedBorder: 1px dashed #eee;
}

#wrap {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  border: var (--dashedBorder);
  background-color: aquamarine;
}

.item {
  height: 50px;
  border: var (--border);
  background-color: pink;
}

#wrap > div:nth-child (1) {
  flex-grow: 1;
}

#wrap > div:nth-child (2) {
  flex-grow: 2;
}

#wrap > div:nth-child (3) {
  flex-grow: 1;
}

从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？

.item {
  width: 50px;
  height: 50px;
  border: var (--border);
  background-color: pink;
}

我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。

flex-shrink

设置项目的收缩比例，如果空间不足，该项目将缩小。
默认值为 1。

flex-basis

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。

• 用长度值来定义宽度，不允许负值。
• 用百分比来定义宽度，不允许负值。
• auto：无特定宽度值，取决于其它属性值。
• content：基于内容自动计算宽度。

flex 属性

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。

• 如果缩写 flex: 0 auto 或者 flex: initial, 则其计算值为 0 1 auto（默认值）。
• 如果缩写 flex: 1, 则其计算值为 1 1 0%。
• 如果缩写 flex: auto, 则其计算值为 1 1 auto。
• 如果缩写 flex: none, 则其计算值为 0 0 auto。