CSS Flexbox 是一种流行的布局方式，可以轻松实现复杂的页面布局和响应式设计。在 Flexbox 布局中，可以使用不同的属性来控制元素之间的间距、方向和对齐方式。在本文中，我们将学习如何设置 Flexbox 布局中元素的对齐方式。
对齐方式
在 Flexbox 布局中，有三种主要的对齐方式：
- 主轴对齐方式（justify-content）
- 交叉轴对齐方式（align-items）
- 交叉轴对齐方式（align-content）
主轴对齐方式
主轴对齐方式控制的是 Flexbox 容器内部所有元素的水平排列方式。使用 justify-content 属性来设置主轴对齐方式。常用的主轴对齐方式包括：
- flex-start：元素和 Flexbox 容器左侧对齐。
- flex-end：元素和 Flexbox 容器右侧对齐。
- center：元素居中对齐。
- space-between：元素按照相同间距分布（首尾无间距）。
- space-around：元素按照相同间距分布（首尾有间距）。
.container {
display: flex;
justify-content: center;
}上面的代码将元素在容器内居中对齐。
交叉轴对齐方式
交叉轴对齐方式控制的是 Flexbox 容器内部所有元素的垂直排列方式。使用 align-items 属性来设置交叉轴对齐方式。常用的交叉轴对齐方式包括：
- flex-start：元素和 Flexbox 容器顶部对齐。
- flex-end：元素和 Flexbox 容器底部对齐。
- center：元素垂直居中对齐。
- baseline：元素根据基线对齐。
- stretch：元素自动拉伸，填满整个容器的高度（默认值）。
.container {
display: flex;
align-items: center;
}上面的代码将元素在容器内纵向居中对齐。
交叉轴对齐方式
当容器内部有多行元素时，交叉轴对齐方式会控制这些行元素之间的间距。使用 align-content 属性来设置交叉轴对齐方式。常用的交叉轴对齐方式包括：
- flex-start：行元素和 Flexbox 容器顶部对齐。
- flex-end：行元素和 Flexbox 容器底部对齐。
- center：所有行元素垂直居中对齐。
- space-between：行元素按照相同间距分布（首尾无间距）。
- space-around：行元素按照相同间距分布（首尾有间距）。
- stretch：行元素自动拉伸，填满整个容器的高度（默认值）。
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}上面的代码将所有行元素在容器内纵向居中对齐，同时允许它们跨行排列。
示例代码
以下是一个使用 Flexbox 布局并设置对齐方式的示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- -------------- ------------- - ----- - ------ ------ ------- ------ ----------------- -------- ------- --- ----- ----- ------- ----- -
上面的代码将使三个元素在容器中按照相等间距居中排列，并在容器内部创建额外的间距。
结论
掌握 CSS Flexbox 布局的对齐方式对于实现复杂的网页布局和响应式设计至关重要。以上我们学习了三种对齐方式，分别是主轴对齐方式、交叉轴对齐方式、以及多个行元素之间的交叉轴对齐方式，并提供了相关示例代码进行实践使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b2c24ddd3a70eb6d1fa98