CSSflex布局：align-items和justify-content用法解析

一分耕耘，一分收获！既然打开了这篇文章《CSS flex 布局技巧：align-items与justify-content组合应用》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

答案：align-items控制交叉轴对齐，justify-content控制主轴对齐。1. 二者组合可实现居中、对齐等布局；2. 需先设display:flex；3. flex-direction改变时主轴方向随之变化。

在使用 CSS Flexbox 布局时，align-items 和 justify-content 是两个核心属性，它们分别控制交叉轴和主轴上的对齐方式。合理组合这两个属性，可以快速实现各种居中、对齐和分布布局。

理解主轴与交叉轴

Flexbox 是一种一维布局模型，它有主轴（main axis）和交叉轴（cross axis）：

• 主轴方向由 flex-direction 决定（默认为 row，即水平方向）
• justify-content 控制主轴上的对齐（如左、右、居中、分散）
• align-items 控制交叉轴上的对齐（如上、下、居中）

常见组合用法

以下是最常用的几种组合，适用于大多数居中和对齐场景：

1. 水平垂直居中：居中一个或多个子元素

当需要将内容在容器中完全居中时：

.container {
  display: flex;
  justify-content: center;  /* 主轴居中（水平） */
  align-items: center;      /* 交叉轴居中（垂直） */
}

无论子元素大小如何，都会在父容器中居中显示。

2. 顶部左对齐：类似默认文档流

让子元素靠左对齐，顶部排列：

.container {
  display: flex;
  justify-content: flex-start; /* 主轴起点对齐（左） */
  align-items: flex-start;     /* 交叉轴起点对齐（上） */
}

3. 底部居中：固定在底部并水平居中

适合做页脚或提示框布局：

.container {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: flex-end;      /* 垂直靠底 */
  height: 200px;
}

4. 垂直居中，水平分散

子元素高度居中，但水平方向均匀分布：

.container {
  display: flex;
  justify-content: space-between; /* 两端对齐，中间等距 */
  align-items: center;            /* 垂直居中 */
}

常用于导航栏布局。

注意事项

使用这两个属性时注意以下几点：

• 必须先设置 display: flex 或 display: inline-flex，否则属性无效
• 如果 flex-direction: column，主轴变为垂直方向，justify-content 控制垂直对齐，align-items 控制水平对齐
• 子元素的 margin: auto 在 Flex 容器中仍可覆盖 align-items 和 justify-content

基本上就这些。掌握 justify-content 管“主方向”，align-items 管“另一个方向”的逻辑，就能灵活应对多数布局需求。

到这里，我们也就讲完了《CSSflex布局：align-items和justify-content用法解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！