【CSS in Depth 2 精译_024】4.2 弹性子元素的大小

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局
  • 4.1 Flexbox 布局原理（已完结）
    • 4.1.1 创建一个基础的 Flexbox 菜单
    • 4.1.2 添加内边距与间隔
  • 4.2 弹性子元素的大小 ✔️
    • 4.2.1 使用 flex-basis 属性 ✔️
    • 4.2.2 使用 flex-grow 属性 ✔️
    • 4.2.3 使用 flex-shrink 属性 ✔️
    • 4.2.4 实际应用 ✔️
  • 4.3 弹性布局的方向（精译中 ⏳）

4.2 弹性子元素的大小

弹性子元素的尺寸大小固然可以用熟悉的 width 和 height 属性来指定，但 Flexbox 布局提供了更丰富的选择。本节就来重点考察其中之一：flex 属性。

flex 属性控制的是沿主轴方向（通常为宽度）上的弹性子元素大小。如代码清单 4.6 所示，先在页面主区域应用 Flexbox 布局，再通过 flex 属性设置各列的尺寸。样式更新后的主区域效果如图 4.7 所示。

图 4.7 应用了弹性布局的白色主区域效果图

根据代码清单 4.6 更新本地样式表。该样式通过 tile 类设置白色背景，然后用 flex 类指定 <main> 元素为弹性容器。

代码清单 4.6 在主容器上应用 Flexbox 布局

.tile {
  /* 给三个板块加上白色背景和内边距 */
  padding: 1.5em;
  background-color: #fff;
}
 
.flex {
  /* 在主容器上应用 flexbox 布局并设置间隙 */
  display: flex;
  gap: var(--gap-size);
}

这样，页面内容就分为了两列：左边的大块区域（column-main）为页面正文区，右边一栏则是登录表单和一个较小的报价区（column-sidebar）。但此时还没有指定列宽，因此宽度是随内容本身自行调整的。如图 4.7 所示，两列内容未能完全填满可用空间，当然对小窗口而言或许没问题。

弹性子元素上的 flex 属性包含了好几个配置项。先通过一个最基本的案例来熟悉它。用 column-main 和 column-sidebar 类来定位两列，再通过 flex 分别指定 ⅔ 和 ⅓ 的列宽：

代码清单 4.7 使用 flex 属性设置列宽

.column-main {
  flex: 2;
}
.column-sidebar {
  flex: 1;
}

这样，两列的宽度就扩展开来，二者之和与 nav 导航条的宽度相等，并保持正文列的宽度是侧边栏的两倍。Flexbox 贴心地完成了所有数学计算。下面具体考察一下这一计算过程。

flex 属性其实是三个尺寸属性 flex-grow、flex-shrink 和 flex-basis 的简写形式。上面的样式相当于只设置了 flex-grow，其余两个属性则取默认值（分别为 1 和 0%）。因此 flex: 2 等效于 flex: 2 1 0%。通常首选简写形式，但也可以像这样分开声明：

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

下面就来分别学习这三个属性。先从 flex-basis 开始，因为它是其余两个属性的基础。

4.2.1 使用 flex-basis 属性

flex-basis 定义了元素大小的基准值，即一个初始的“主尺寸”。flex-basis 属性可以设置为任意合法的 width 属性值，如 px、em 及百分比；其初始值（initial value）为 auto，此时如果浏览器发现元素指定了 width 属性，则该 width 值即为 flex-basis 的值，否则根据元素内容确定大小。如果 flex-basis 的值不为 auto，其 width 属性值也将被忽略。如图 4.8 所示。

图 4.8 三个弹性子元素的 flex-basis 均为 20%，各占初始主尺寸（宽度）的 20%

初始主尺寸全部确定后，这些弹性子元素可能还需要沿主轴方向适度伸缩，以适应（或填充）弹性容器的大小。此时就需要 flex-grow 和 flex-shrink 这两个属性做进一步控制。

4.2.2 使用 flex-grow 属性

子元素的 flex-basis 全部确定后，连同子元素间的所有间隙与外边距，加起来的总宽度未必刚好等于弹性容器的宽度，很可能会留白（如图 4.8 所示）。

这部分留白（或剩余宽度）会根据 flex-grow 的值按比例分配给每个弹性子元素。flex-grow 的值为非负整数。当值为 0 时，表示该弹性子元素的宽度最多延展到 flex-basis 的大小；而当值大于 0 时，则表示该元素将按比例延展，直至填满整个弹性容器（如图 4.9 所示）。

图 4.9 带有 flex-grow 值的子元素将按比例延展，直到填满整个弹性容器

flex-grow 的值越大，该元素的“权重”越高，占据的剩余宽度也就越多。如图 4.10 所示，flex-grow: 2 的子元素延展量是 flex-grow: 1 的子元素的两倍。

图 4.10 flex-grow 值越大，子元素延展时分得的剩余可用宽度的比重就越高

回到本节开头那个示例。简写声明 flex: 2 与 flex: 1 对应的 flex-basis 均为 0%，因此，用整个容器的宽减去两列间的间隙 1.5em，就得到了总剩余宽度的大小。剩余宽度再按比例分配给这两列：总量的 ⅔ 分给第一列，剩下的 ⅓ 分给第二列（如图 4.11 所示）。

图 4.11 两个内容列完全填充弹性容器宽度后的效果图

推荐使用简写属性 flex，而不是单独声明 flex-grow。flex 属性与大多数简写属性不同，其省略的样式值不会被设为对应的初始值（initial value）；相反，简写形式会默认给它们赋上有用的值：flex-grow 为 1，flex-shrink 也为 1，而 flex-basis 默认取 0%。在大多数情况下这些值都是满足需要的。

4.2.3 使用 flex-shrink 属性

flex-shrink 属性与 flex-grow 遵循相似的原则。初始主尺寸确定后，累加后的总宽度可能会超出弹性容器的可用宽度。如果不设置 flex-shrink，内容就会溢出（如图 4.12 所示）。

图 4.12 弹性子元素总的初始宽度可能超出弹性容器

各子元素上的 flex-shrink 值表示该元素是否应该收缩尺寸，以防溢出容器。若值为 0，则不收缩；若值大于 0，则对应元素将一直收缩，直到总尺寸不再溢出。flex-shrink 的值所占比重越高，其子元素收缩的幅度相应就越大（由于收缩时初始主尺寸也算在内，因此尺寸大的元素会比尺寸小的收缩得更多）。

作为备选方案，也可以在示例页中通过 flex-shrink 来实现类似的两列布局效果。先将两个内容列的 flex-basis 设为想要的比例（即 66.67% 和 33.33%），这样二者的总宽度加上 1.5em 的间隙，总量将比容器多出 1.5em。再将两列的 flex-shrink 分别设为 1，这样每一列就会收缩相同的宽度以避免溢出容器。所需样式如代码清单 4.8 所示。

代码清单 4.8 使用 flex 属性设置宽度

.column-main {
  flex: 66.67%;  /* 等效于 flex: 1 1 66.67% */
}
.column-sidebar {
  flex: 33.33%;  /* 等效于 flex: 1 1 33.33% */
}

该解决方案与前面（即代码清单 4.7）给出的方案可谓殊途同归，都能满足页面布局的需要。

注意

如果深究细节，代码清单 4.7 和 4.8 之间还是存在细微差别的。具体原因有点复杂，但简单来讲，是因为 column-main 列设置了内边距 padding，而 column-sidebar 列则没有。当 flex-basis 为 0% 时，内边距会改变弹性子元素初始主尺寸的计算方式。因此，代码清单 4.7 中的正文列 column-main 会比 4.8 中的略宽一些。如果对测量精度有要求，网格布局不失为一种更好的解决方案（详见第 5 章）。

4.2.4 实际应用

flex 属性的用法有很多，可以像前面的网页那样，用 flex-grow 值或者 flex-basis 百分比来定义每列的占比；也可以定义一组宽度固定的列，外加可以随视口动态缩放的“流体”列（“fluid” columns）；还可以效仿 Bootstrap 那样的第三方库，通过构建出一套“网格系统”，提供一系列可复用的样式类，来定义具有不同预设尺寸的布局列。图 4.13 给出了 Flexbox 可以实现的几种布局效果。

图 4.13 用 flex 属性定义元素尺寸的几种方式

第三个示例展示的是曾经的“圣杯”布局（“Holy Grail” layout）—— 一个在过去用 CSS 实现起来异常困难的布局效果。该布局中，两个侧边栏的宽度是固定的，而中间那一栏则是“流动的”（“fluid”），即要求自动填满可用空间。最要命的是，这三列的高度还要完全相等，而高度又是其内容决定的。现在，人们只要利用不同的弹性子元素，略加想像就能组合出各式各样的解决方案轻松实现这样的效果。