Flexbox通过justify-content设置主轴对齐，align-items控制交叉轴对齐，align-self单独调整子元素，align-content管理多行行间对齐，实现灵活布局。

在使用 Flexbox 布局时，可以通过 CSS 控制子元素的对齐方式。主要涉及两个方向的对齐：主轴（horizontal）和交叉轴（vertical）。下面介绍几个关键属性及其用法。

1. justify-content：控制主轴上的对齐

该属性用于设置 flex 子元素在主轴（默认是水平方向）上的对齐方式。常见取值包括：

• flex-start：子元素向主轴起点对齐（默认值）
• flex-end：子元素向主轴终点对齐
• center：子元素在主轴居中对齐
• space-between：子元素之间间距相等，首尾元素贴边
• space-around：每个子元素周围有相等的空间
• space-evenly：子元素之间的间距以及与容器边缘的间距都相等

示例：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

2. align-items：控制交叉轴上的对齐

该属性定义子元素在交叉轴（默认是垂直方向）上的对齐方式。常用值有：

• stretch：子元素拉伸填满容器（默认值，前提是子元素没有设置高度）
• flex-start：子元素在交叉轴起点对齐
• flex-end：子元素在交叉轴终点对齐
• center：子元素在交叉轴居中对齐
• baseline：子元素按基线对齐

示例：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

3. align-self：单独控制某个子元素的对齐

如果只想调整某一个子元素在交叉轴上的对齐方式，可以使用 align-self，它会覆盖父容器的 align-items 设置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 取值与 align-items 相同

示例：

.item {
  align-self: flex-end; /* 这个子元素在交叉轴底部对齐 */
}

4. align-content：多行 flex 容器中行的对齐

当 flex 容器换行（flex-wrap: wrap）且有多行时，此属性控制行与行之间的对齐方式。单行情况下无效。

• stretch：各行均匀拉伸填满容器
• center：行整体在交叉轴居中
• flex-start：行从交叉轴起点排列
• flex-end：行从交叉轴终点排列
• space-between：行之间间距平均分布
• space-around：每行周围有均匀空间

基本上就这些。合理组合这几个属性，就能实现各种常见的布局需求，比如水平垂直居中、两端对齐、顶部对齐等。