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相同。