Flexbox 在居中多个元素以及处理不同大小元素的间距方面表现非常出色。然而，它在对齐行和列或保持元素处于结构化网格布局方面并不太擅长。

正如我们之前看到的，列（columns）在创建文本列时表现出色，但在布局非文本内容时可能会变得难以控制。

Flexbox 出现在 CSS Grid 之前，因此拥有更好的浏览器兼容性（尽管 CSS Grid 的浏览器支持也已非常优秀）。Flexbox 在以下场景下尤为出色：

• 用于单行或单列布局
• 多行布局且不需要精细控制时
• 处理大小不一的对象时

如果你需要精确到像素级别的元素定位控制，Flexbox 可能会让你抓狂；但如果你的布局需求较为宽松，或者面对的是尺寸各异的元素，那么 Flexbox 是一个极佳的选择。

Flex 属性

display: flex：该属性应用于容器元素，即你希望进行布局的子元素的父级元素。如果没有容器元素，你需要手动创建一个。

1.undead-parent {
2    display: flex;
3}

flex-direction：定义元素的排列方式，可以是垂直方向（列）或水平方向（行），并确定所使用的主轴和交叉轴。由于该属性会改变块级方向与内联方向的角色，使用 Flexbox 时最好将它们称为“主轴”和“交叉轴”。当 flex-direction 设置为行时，主轴方向为内联方向；而当设置为列时，主轴方向变为块级方向，但 Flex 子项内部的元素和文本仍遵循默认的内联与块级方向。

由于这可能比午夜场观看《活死人之夜》的僵尸还要令人困惑，我们统一使用“主轴”和“交叉轴”这两个术语。请记住，它们的方向会根据 flex-direction 的选择而变化。为了简化理解，我们假设使用从左到右书写的语言（如英语），此时内联方向为从左到右，块级方向为从上到下。如果使用其他语言或书写方向，这些方向也会相应调整。

1.undead-parent {
2    flex-direction: column;
3}

• column：元素垂直排列，第一个元素位于顶部。
• column-reverse：元素垂直排列，第一个元素位于底部。
• row：元素水平排列，第一个元素位于左侧。
• row-reverse：元素水平排列，第一个元素位于右侧。

flex-wrap：控制所有项目是否显示在一行或一列中，还是自动换行到多行或多列。

1.undead-parent {
2    flex-wrap: wrap;
3}

• wrap：Flex 项目会自动换行到多行或多列。
• nowrap：所有项目保持在同一行或同一列中，即使导致内容被挤压（“挤压”是技术术语）。
• wrap-reverse：反转项目换行的方向。

flex-flow：这是 flex-direction 和 flex-wrap 的简写属性。

1.undead-parent {
2    flex-flow: column wrap-reverse;
3}

可尝试的实验：

1. 分别添加和移除每种 flex-direction 类型的注释，观察布局如何变化。
2. 为 .bandmember 类添加 display: flex 和 flex-direction 属性。
3. 分别添加和移除每种 flex-wrap 类型的注释，观察不同 flex-direction 选择下换行行为的变化。
4. 尝试使用 flex-flow 组合你最喜欢的排列与换行方式。