Flex弹性布局常用的属性分类

Flex布局是一种用于创建弹性布局的CSS模型。本文将从Flex布局中容器属性（应用于flex容器），和子元素属性（应用于flex子元素）进行分类总结。

1. 容器属性（应用于flex容器）：

- `display`: 设置元素的显示类型。将其设置为`flex`或`inline-flex`可以创建flex容器。
- `flex-direction`: 设置flex容器中子元素的排列方向。可选值包括`row`（默认值，从左到右排列）、`row-reverse`（从右到左排列）、`column`（从上到下排列）和`column-reverse`（从下到上排列）。
- `flex-wrap`: 设置flex容器中子元素的换行方式。可选值包括`nowrap`（默认值，不换行）、`wrap`（换行，从上到下排列）和`wrap-reverse`（换行，从下到上排列）。
- `flex-flow`: `flex-direction`和`flex-wrap`的简写属性。例如，`flex-flow: row wrap`。
- `justify-content`: 设置flex容器中子元素在主轴上的对齐方式。可选值包括`flex-start`（默认值，左对齐）、`flex-end`（右对齐）、`center`（居中对齐）、`space-between`（两端对齐，子元素之间的间距相等）和`space-around`（每个子元素两侧的间距相等）。
- `align-items`: 设置flex容器中子元素在交叉轴上的对齐方式。可选值包括`flex-start`（起点对齐）、`flex-end`（终点对齐）、`center`（居中对齐）、`baseline`（基线对齐）和`stretch`（默认值，如果子元素未设置高度或设为auto，将占满整个容器的高度）。
- `align-content`: 设置flex容器中多行子元素在交叉轴上的对齐方式。可选值与`align-items`相同。

2. 子元素属性（应用于flex子元素）：

- `order`: 设置flex子元素的排列顺序。数值越小，排列越靠前。默认值为0。
- `flex-grow`: 设置flex子元素的放大比例。默认值为0，即如果存在剩余空间，子元素不放大。
- `flex-shrink`: 设置flex子元素的缩小比例。默认值为1，即如果空间不足，子元素将缩小。
- `flex-basis`: 设置flex子元素的基本大小。可以是长度值（如px、em、%等）或关键字（如`auto`）。默认值为`auto`。
- `flex`: `flex-grow`、`flex-shrink`和`flex-basis`的简写属性。例如，`flex: 1 1 0`。
- `align-self`: 设置flex子元素在交叉轴上的对齐方式。可选值与`align-items`相同。