CSS Flexbox 是一种强大的布局模式，它可以帮助我们轻松地创建复杂的布局。其中一个最重要的特性就是对齐子项，这在某些情况下非常有用。本文将介绍如何在 CSS Flexbox 中对齐子项，包括水平对齐和垂直对齐。
水平对齐
水平对齐是指如何将 Flex 子项在主轴上对齐。在 CSS Flexbox 中，我们可以使用 justify-content 属性来控制主轴上的对齐方式。下面是一些常用的取值：
flex-start：默认值，将子项对齐到主轴起点。flex-end：将子项对齐到主轴终点。center：将子项在主轴上居中对齐。space-between：将子项沿主轴平均分布，两端不留空隙。space-around：将子项沿主轴平均分布，两端留有空隙。
下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ----- - ------ ------ ------- ------ ----------------- ---- -展开代码
在这个示例中，我们将 .container 设置为 Flex 容器，并使用 justify-content: center; 将子项在主轴上居中对齐。这将使三个子项都在 Flex 容器的中心位置。
垂直对齐
垂直对齐是指如何将 Flex 子项在交叉轴上对齐。在 CSS Flexbox 中，我们可以使用 align-items 属性来控制交叉轴上的对齐方式。下面是一些常用的取值：
flex-start：将子项对齐到交叉轴起点。flex-end：将子项对齐到交叉轴终点。center：将子项在交叉轴上居中对齐。baseline：将子项在基线上对齐。stretch：默认值，将子项在交叉轴上拉伸至与 Flex 容器一样高。
下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ---- -展开代码
在这个示例中，我们将 .container 设置为 Flex 容器，并使用 align-items: center; 将子项在交叉轴上居中对齐。这将使三个子项都在 Flex 容器的中心位置。
对齐单个子项
如果您想对齐单个子项，可以使用 align-self 属性。这个属性可以覆盖 Flex 容器的 align-items 属性，使单个子项在交叉轴上对齐。
下面是一个示例代码：
<div class="container"> <div class="item"></div> <div class="item align-self-end"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ---- - --------------- - ----------- --------- -展开代码
在这个示例中，我们将第二个子项的 align-self 属性设置为 flex-end，这将使它在交叉轴上对齐到 Flex 容器的底部。
结论
在 CSS Flexbox 中对齐子项非常简单，只需要使用 justify-content 和 align-items 属性即可。如果您想对齐单个子项，可以使用 align-self 属性。希望本文能够帮助您更好地理解 CSS Flexbox 的对齐特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6769213e98e3e1ab1a8c164e
