flex布局

1. justify-content 主轴对齐方式

• flex-start（默认值）：项目靠近主轴的起始位置对齐（一般为左对齐）。
• flex-end：项目靠近主轴的结束位置对齐（一般为右对齐）。
• center：项目在主轴上居中对齐。
• space-between：项目两端对齐，靠近容器边界，中间的剩余空间在各项目间均分。
• space-around：项目分散对齐，与容器边界保持一定距离，剩余空间在每个项目两侧平均分配。
• space-evenly：项目均匀对齐，与容器边界保持一定距离，剩余空间在项目间平分。

2. align-items 侧轴对齐方式

• flex-start：项目与侧轴的起始位置对齐。
• flex-end：项目与侧轴的结束位置对齐。
• center：项目在侧轴上居中对齐。
• stretch（默认值）：项目在未指定高度或高度为auto时，将拉伸至填满容器高度。

3. align-content 多行内容对齐方式

• space-between：行与行之间分布间隔，两端对齐。
• space-around：行与行之间分布间隔，两侧保留空间。
• center：行内容整体居中对齐。

4. flex-direction 主轴方向

• row（默认值）：主轴方向为水平方向，项目从左到右排列。
• column：主轴方向为垂直方向，项目从上到下排列。

5. flex-wrap 换行方式

• nowrap（默认值）：不换行，项目会压缩宽度以适应容器。
• wrap：项目会在必要时换行。
• wrap-reverse：项目换行且反向排列。

/* Flex 容器基础设置 */
.flex-container {
    display: flex; /* 或 inline-flex */
    
    /* 主轴方向 */
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    
    /* 换行设置 */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    
    /* 主轴对齐 */
    justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */
    
    /* 交叉轴对齐 */
    align-items: center; /* flex-start | flex-end | center | baseline | stretch */
    
    /* 多行对齐 */
    align-content: space-between; /* flex-start | flex-end | center | space-between | space-around | stretch */
}

/* 简写属性 */
.flex-container {
    /* flex-flow = flex-direction + flex-wrap */
    flex-flow: row wrap;
}