移动端布局 flex

移动端布局一般使用弹性盒子模型（Flexbox）来实现，Flexbox 是 CSS3 中新增的一种布局模式。它通过设置容器（即父元素）和项目（即子元素）的属性来实现灵活的布局方式，可以非常方便地实现响应式布局。移动端布局中，Flexbox 常用于实现多列布局、垂直居中、自适应等效果。

在移动端布局中使用 Flexbox，一般需要设置以下属性：
- display: flex; 用于将容器设置为弹性盒子
- flex-direction: row/column; 用于设置主轴的方向
- justify-content: flex-start/center/flex-end/space-between/space-around; 用于设置主轴上的对齐方式
- align-items: flex-start/center/flex-end/stretch/baseline; 用于设置交叉轴上的对齐方式
- flex-wrap: nowrap/wrap/wrap-reverse; 用于设置容器是否换行
- flex-grow: number; 用于设置项目的放大比例
- flex-shrink: number; 用于设置项目的缩小比例
- flex-basis: length; 用于设置项目在主轴上的基准长度