css flex布局

CSS Flex布局是一种弹性盒子布局模型，它可以让容器中的子元素自动适应空间分配，并且可以轻松地实现对齐、排列和分布。

Flex布局中有两个重要的概念：容器和项目。容器是指包含Flex布局的父元素，而项目则是指容器中的子元素。

以下是一些Flex布局的基本属性：

1. display: flex; - 将元素设置为Flex容器，使其子元素成为Flex项目。

2. flex-direction: row/column; - 定义Flex容器中项目的排列方向，可以是水平方向（默认）或垂直方向。

3. justify-content: flex-start/end/center/space-between/space-around; - 定义Flex容器中项目的水平对齐方式。

4. align-items: flex-start/end/center/baseline/stretch; - 定义Flex容器中项目的垂直对齐方式。

5. flex-wrap: nowrap/wrap/wrap-reverse; - 定义Flex容器中项目的换行方式。

6. flex-grow: number; - 定义Flex项目的放大比例。

7. flex-shrink: number; - 定义Flex项目的缩小比例。

8. flex-basis: length/initial/auto; - 定义Flex项目的基准大小。

9. flex: flex-grow flex-shrink flex-basis; - 以上三个属性的缩写形式。

10. align-self: flex-start/end/center/baseline/stretch/auto; - 定义Flex项目自身的垂直对齐方式，覆盖容器的align-items属性。

以上是Flex布局的一些基本属性，通过这些属性的组合，可以实现各种不同的布局效果。