css display flex

CSS的`display`属性可以用来控制元素的显示方式。其中，`flex`是一种弹性布局模型，通过将父元素设置为`display: flex`，可以创建一个弹性容器，从而控制子元素的布局和排列方式。

当父元素的`display`属性为`flex`时，子元素会按照弹性布局规则进行排列。以下是一些常用的`display: flex`相关属性：

1. `flex-direction`: 指定子元素的排列方向。默认值是`row`，从左到右水平排列。其他可选值包括`column`（从上到下垂直排列）、`row-reverse`（从右到左水平排列）和`column-reverse`（从下到上垂直排列）。

2. `justify-content`: 控制子元素在主轴上的对齐方式。常用值包括`flex-start`（靠左/靠上对齐）、`flex-end`（靠右/靠下对齐）、`center`（居中对齐）、`space-between`（平均分布在主轴上）和`space-around`（平均分布在主轴上，两端间距是中间间距的一半）。

3. `align-items`: 控制子元素在交叉轴上的对齐方式。常用值包括`flex-start`（靠上对齐）、`flex-end`（靠下对齐）、`center`（居中对齐）、`baseline`（基线对齐）和`stretch`（拉伸以填满容器）。

4. `flex-wrap`: 控制子元素是否换行。默认值是`nowrap`，即不换行。其他可选值包括`wrap`（换行）和`wrap-reverse`（反向换行）。

5. `align-content`: 控制多行子元素在交叉轴上的对齐方式（只有在有换行时才生效）。常用值包括`flex-start`（靠上对齐）、`flex-end`（靠下对齐）、`center`（居中对齐）、`space-between`（平均分布在交叉轴上）和`stretch`（拉伸以填满容器）。

这些是使用`display: flex`时的一些常见属性，可以根据需要进行调整以实现所需的布局效果。