Flex 布局介绍

Flex 是一种弹性盒子布局模式，它提供了一种更加灵活的方式来排列和对齐元素，同时还可以解决很多传统布局模式难以解决的问题。

使用 Flex 布局

要使用 Flex 布局，需要在容器元素上设置 display 属性为 flex 或 inline-flex：

.container {
  display: flex;
  /* 或者： display: inline-flex; */
}

这样，里面的子元素就成为了 flex 元素，它们可以被灵活地排列和对齐。

主轴和交叉轴

在 Flex 中，容器元素和其子元素都有一个主轴和一个交叉轴。主轴和交叉轴的方向由容器元素的 flex-direction 属性决定。默认情况下，主轴方向是从左到右，交叉轴方向是从上到下。

容器属性

容器元素可以通过一些属性来控制子元素的布局：

1. flex-direction：控制主轴方向，可以设置为 row（从左到右）、column（从上到下）、row-reverse（从右到左）或 column-reverse（从下到上）。
2. justify-content：控制子元素在主轴上的对齐方式，可以设置为 flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）或 space-evenly（每个项目前后的间隔和项目之间的间隔相等）。
3. align-items：控制子元素在交叉轴上的对齐方式，可以设置为 stretch（默认值，拉伸填充）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）或 baseline（基线对齐）。
4. align-content：当容器内有多行时，控制各行之间的对齐方式，可以设置为 stretch（默认值，拉伸填充）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）、space-between（两端对齐，各行之间的间隔相等）、space-around（每行两侧的间隔相等）或 space-evenly（每行前后的间隔和每行之间的间隔相等）。

子元素属性

子元素也可以通过一些属性来控制布局：

1. flex-basis：指定元素在主轴上的初始大小。
2. flex-grow：指定元素在主轴上的扩展比例。
3. flex-shrink：指定元素在主轴上的收缩比例。
4. flex：同时设置 flex-grow、flex-shrink 和 flex-basis。
5. order：控制元素在主轴上的排列顺序。

示例代码

以下是一个包含 3 个子元素的容器，它们按照从左到右的顺序排列，每个元素都占据相等的空间，并且在交叉轴上居中对齐：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container > div {
  flex: 1;
}

参考链接

1. Flex 布局教程
2. A Complete Guide to Flexbox