FLEX 布局中最常用的代码

1. 将容器设置为弹性布局：

display: flex;

2. 设置主轴方向（横向或纵向）：

flex-direction: row; /* 横向 */
flex-direction: column; /* 纵向 */

3. 设置项目在主轴方向上的对齐方式：

justify-content: flex-start; /* 左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 每个项目两侧的间隔相等 */

4. 设置项目在交叉轴方向上的对齐方式：

align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 项目的基线对齐 */
align-items: stretch; /* 项目被拉伸以适应容器 */

5. 设置项目在交叉轴方向上的排列顺序：

order: 1; /* 顺序，值越小越靠前，默认为0 */

6. 设置项目在主轴方向上占据的空间比例：

flex: 1; /* 分配剩余空间，值越大占据空间越多 */

7. 设置项目在主轴方向上的对齐方式：

align-self: flex-start; /* 顶部对齐 */
align-self: flex-end; /* 底部对齐 */
align-self: center; /* 居中对齐 */
align-self: baseline; /* 基线对齐 */
align-self: stretch; /* 被拉伸以适应容器 */