主流布局 flex布局

Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。

在Flex布局中，有两个重要的概念：容器和子元素。容器是指应用Flex布局的父元素，而子元素则是容器内部的直接子元素。

以下是Flex布局的一些主要特点和属性：

1. 容器属性：
- display: flex;：将容器设置为Flex布局。
- flex-direction：指定主轴的方向，可以是row（水平方向）、column（垂直方向）、row-reverse（水平反向）或column-reverse（垂直反向）。
- justify-content：定义了子元素在主轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧的间隔相等）。
- align-items：定义了子元素在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。
- flex-wrap：定义了子元素是否换行，可以是nowrap（不换行）、wrap（换行）或wrap-reverse（反向换行）。

2. 子元素属性：
- flex：指定子元素的伸缩比例，用于控制子元素在容器中的占比。
- align-self：定义了单个子元素在交叉轴上的对齐方式，可以覆盖容器的align-items属性。

以上是Flex布局的一些基本概念和属性，通过灵活地使用这些属性，可以实现各种不同的布局效果。