css类似flex布局

flex布局是一种弹性布局模型，它可以让容器中的子元素自动排列并占据可用空间。相比传统的基于盒模型的布局方式，flex布局更加灵活和简便。

在使用flex布局时，可以通过设置容器的display属性为flex来启用flex布局。然后，可以使用一系列的属性来控制子元素的布局和行为，包括flex-direction、flex-wrap、justify-content、align-items和align-content等。

flex-direction用于指定子元素的排列方向，可以是row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。

flex-wrap用于指定子元素是否换行，可以是nowrap（不换行）、wrap（换行）或wrap-reverse（反向换行）。

justify-content用于指定子元素在主轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）或space-around（每个项目两侧的间隔相等）。

align-items用于指定子元素在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。

align-content用于指定多行子元素在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，行之间的间隔相等）或space-around（每行两侧的间隔相等）。

除了以上属性，还有一些其他属性可以用于控制子元素的尺寸和顺序，例如flex-basis、flex-grow和flex-shrink等。