css justify-content与align-items配合使用技巧

justify-content与align-items配合使用可通过控制主轴和交叉轴对齐实现多样化布局，核心技巧包括明确主轴方向、选择适配的对齐组合，并注意单行与多行布局的差异及响应式调整。

• 主轴与交叉轴的确定主轴方向由flex-direction决定：

  默认row时，主轴为水平方向（justify-content控制水平对齐），交叉轴为垂直方向（align-items控制垂直对齐）。

  设为column时，主轴变为垂直方向，交叉轴为水平方向。例如：.container { flex-direction: column; }中，justify-content: center会使子元素垂直居中，align-items: center则使其水平居中。

• 常见对齐组合场景

  完全居中：.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}适用于弹窗、登录框等需要精确居中的场景。

  左对齐+垂直居中：.nav { display: flex; justify-content: flex-start; /* 靠左排列 */ align-items: center; /* 垂直居中 */}常用于导航栏，确保菜单项左侧对齐且垂直方向居中。

  两端对齐+垂直居中：.header { display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */}适合页眉或按钮组，左右元素贴边，中间自动分配空间。

• 单行与多行布局的差异

  单行布局：仅需align-items控制交叉轴对齐。

  多行布局（flex-wrap: wrap）：

  align-items控制每行内项目的交叉轴对齐。

  align-content控制行与行之间的分布（需固定容器高度）。示例：

  .container { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; /* 多行居中 */ align-items: center; /* 每行内项目居中 */ height: 400px;}

• 响应式布局中的灵活运用通过媒体查询调整主轴方向和对齐方式，适配不同屏幕尺寸：

  .card-group { display: flex; flex-direction: row; justify-content: center; align-items: stretch; /* 横向时拉伸高度 */}@media (max-width: 768px) { .card-group { flex-direction: column; align-items: center; /* 竖向时宽度居中 */ justify-content: flex-start; /* 主轴变为垂直，靠上对齐 */ }}

关键点总结：

1. 理清主轴方向：根据flex-direction确定justify-content和align-items的作用方向。
2. 选择适配组合：根据布局目标（如居中、对齐、分布）选择属性值（如center、space-between）。
3. 区分单行与多行：多行布局需结合align-content控制行间距。
4. 响应式调整：通过媒体查询切换主轴方向和对齐方式，提升适配性。

掌握这些技巧后，可通过练习不同组合（如flex-end与stretch的搭配）进一步熟练应用。