flex 移动端布局

Flex布局是一种用于移动端开发的弹性盒子布局模型，它可以方便地实现页面元素的自适应和灵活排列。以下是Flex布局的一些特点和用法：

1. 容器和项目：Flex布局由容器和项目组成。容器是指应用Flex布局的父元素，而项目则是容器内的子元素。

2. 主轴和交叉轴：Flex布局中有主轴和交叉轴两个方向。主轴是项目排列的方向，默认为水平方向（row），交叉轴则是垂直于主轴的方向。

3. 容器属性：
- 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（换行）。
- align-content: 设置多行项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每行两侧间隔相等）。

4. 项目属性：
- flex: 设置项目的伸缩比例，默认为0，即不伸缩。可以通过设置不同的值来实现不同的伸缩效果。
- order: 设置项目的排列顺序，数值越小越靠前，默认为0。
- align-self: 设置单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。