css flexbox主轴对齐justify-content与align-items组合_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-16

浏览次数：次

答案：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者结合可实现居中、两端对齐等布局效果。

css flexbox主轴对齐justify-content与align-items组合

在使用 CSS Flexbox 布局时，justify-content 和 align-items 是控制子元素对齐方式的两个核心属性。它们分别作用于主轴（main axis）和交叉轴（cross axis），配合使用可以实现各种居中、对齐和分布效果。

该属性定义了 flex 容器中的子元素在主轴上的排列与对齐方式。主轴的方向由 flex-direction 决定（默认为 row，即水平从左到右）。

常见值包括：

该属性定义子元素在交叉轴上的对齐方式。交叉轴始终垂直于主轴。例如，主轴是 row（水平），交叉轴就是 vertical（垂直）。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

常用值有：

通过结合 justify-content 和 align-items，可以轻松实现多种布局需求。

完全居中一个元素：
justify-content: center; align-items: center;
水平垂直都居中，适合模态框或提示信息。
顶部左对齐，类似默认文档流：
justify-content: flex-start; align-items: flex-start;
底部居中按钮组：
justify-content: center; align-items: flex-end;
按钮在底部水平居中排列。
等间距导航栏（横向）：
justify-content: space-between; align-items: center;
首尾项贴边，中间均匀分布，垂直居中。
垂直菜单项居中显示（主轴为 column）：
flex-direction: column; justify-content: center; align-items: center;
所有菜单项在容器中垂直居中且水平居中。