Flex 布局
Flex 布局是一种现代的 CSS 布局模型，用于实现灵活的盒子布局。它提供了强大的布局能力，使得元素可以自动调整大小、对齐和分布，适用于构建响应式和可伸缩的布局。
Flex 布局使用 flex 容器和 flex 项目的概念。容器是一个父元素，包含了一组子元素作为项目。以下是对 Flex 布局中常用属性的详细讲解。
Flex 容器属性
display
display 属性用于定义一个元素作为 Flex 容器。
.container {
display: flex;
}
display: flex;将元素设置为 Flex 容器。display: inline-flex;将元素设置为内联的 Flex 容器。
flex-direction
flex-direction 属性用于定义 Flex 项目的排列方向。
.container {
flex-direction: row;
}
flex-direction: row;水平排列项目（默认值）。flex-direction: row-reverse;反向水平排列项目。flex-direction: column;垂直排列项目。flex-direction: column-reverse;反向垂直排列项目。
flex-wrap
flex-wrap 属性用于定义是否允许 Flex 项目换行。
.container {
flex-wrap: nowrap;
}
flex-wrap: nowrap;不允许项目换行（默认值）。flex-wrap: wrap;允许项目换行。flex-wrap: wrap-reverse;反向允许项目换行。
justify-content
justify-content 属性用于定义 Flex 项目在主轴上的对齐方式。
.container {
justify-content: flex-start;
}
justify-content: flex-start;项目靠主轴起始位置对齐（默认值）。justify-content: flex-end;项目靠主轴结束位置对齐。justify-content: center;项目在主轴上居中对齐。justify-content: space-between;项目在主轴上平均分布，首尾项目靠容器边缘。justify-content: space-around;项目在主轴上平均分布，项目之间有相等的间隔空间。justify-content: space-evenly;项目在主轴上平均分布，项目之间和首尾项目到容器边缘的间隔空间均相等。
align-items
align-items 属性用于定义 Flex 项目在交叉轴上的对齐方式。
.container {
align-items: center;
}
align-items: stretch;项目拉伸以填满交叉轴空间（默认值）。align-items: flex-start;项目靠交叉轴起始位置对齐。align-items: flex-end;项目靠交叉轴结束位置对齐。align-items: center;项目在交叉轴上居中对齐。align-items: baseline;项目基线对齐。
align-content
align-content 属性用于定义多行 Flex 项目在交叉轴上的对齐方式。
.container {
align-content: flex-start;
}
align-content: stretch;多行项目拉伸以填满交叉轴空间（默认值）。align-content: flex-start;多行项目靠交叉轴起始位置对齐。align-content: flex-end;多行项目靠交叉轴结束位置对齐。align-content: center;多行项目在交叉轴上居中对齐。align-content: space-between;多行项目在交叉轴上平均分布，首尾项目靠容器边缘。align-content: space-around;多行项目在交叉轴上平均分布，项目之间有相等的间隔空间。align-content: space-evenly;多行项目在交叉轴上平均分布，项目之间和首尾项目到容器边缘的间隔空间均相等。
Flex 项目属性
order
order 属性用于定义 Flex 项目的排列顺序。
.item {
order: 1;
}
order的值为整数，默认为 0。数值越小，项目越靠前；数值相同时，按照源代码中的顺序排列。
flex-grow
flex-grow 属性用于定义 Flex 项目的放大比例。
.item {
flex-grow: 1;
}
flex-grow的值为非负数，默认为 0。项目的宽度将根据放大比例进行分配。
flex-shrink
flex-shrink 属性用于定义 Flex 项目的缩小比例。
.item {
flex-shrink: 1;
}
flex-shrink的值为非负数，默认为 1。项目的宽度将根据缩小比例进行分配。
flex-basis
flex-basis 属性用于定义 Flex 项目的初始宽度。
.item {
flex-basis: 100px;
}
flex-basis的值可以是长度值（如像素或百分比），也可以是关键字auto（默认值）。它指定了项目在分配多余空间之前的初始宽度。
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。
.item {
flex: 1 1 100px;
}
flex的值是由三个部分组成的缩写：flex-grow、flex-shrink和flex-basis。可以省略其中的任何一个值，默认值为0 1 auto。
align-self
align-self 属性用于定义单个 Flex 项目在交叉轴上的对齐方式，覆盖了容器的 align-items 属性。
.item {
align-self: center;
}
align-self的值与align-items属性相同。
以上是 Flex 布局中常用的属性和用法。通过灵活组合这些属性，可以实现各种复杂的盒子布局。