Flexbox 是一种流行的 CSS 布局方法，它可以让我们以一种非常便捷的方式控制容器内子元素的排列方式和对齐方式。下面我们将介绍一些常用的技巧，可以帮助我们更好地使用 Flexbox 实现元素对齐。
对齐方式
Flexbox 提供了三个主要的对齐方式：主轴对齐、交叉轴对齐和基线对齐。
主轴对齐
主轴对齐可以控制子元素在主轴方向上的对齐方式。主轴方向是指 flex-direction 属性设定的轴线方向。以下是一些常用的主轴对齐方式：
- flex-start：将子元素靠左（或靠上）排列。
- flex-end：将子元素靠右（或靠下）排列。
- center：将子元素居中排列。
- space-between：将子元素均匀分布在容器内，首个子元素在容器起始位置，最后一个子元素在容器结束位置。
- space-around：将子元素均匀分布在容器内，每个子元素前后都有一定的间距。
交叉轴对齐
交叉轴对齐可以控制子元素在交叉轴方向上的对齐方式。交叉轴方向是指主轴方向的垂直方向。以下是一些常用的交叉轴对齐方式：
- stretch：子元素将会拉伸充满整个容器（默认值）。
- flex-start：将子元素靠上排列。
- flex-end：将子元素靠下排列。
- center：将子元素居中排列。
- baseline：将子元素的基线对齐，这需要设置子元素的 align-self 属性为 baseline。
基线对齐
基线对齐可以让子元素以其基线为准进行对齐。基线是指一个字符的底部边缘，而不是整个元素的底部边缘。以下是一些常用的基线对齐方式：
- baseline：将子元素的基线对齐，这需要设置子元素的 align-self 属性为 baseline。
- first baseline：将第一行子元素的基线对齐。
- last baseline：将最后一行子元素的基线对齐。
实例分析
下面是一个比较完整的示例代码，来演示 Flexbox 布局常用技巧：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ------------------- ------- ---------- - -------- ----- ---------- --- ----- ---------------- -------------- ------------ ------- -------------- -------------- - ----- - ------ ------ ------- ------ -------------- ----- ----------------- ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- - ------- - ------- ------ ---------- ----- - ------- - ------- ------ ---------- ----- - ------- - ------- ------ ---------- ----- - -------- ------- ------ ---- ------------------ ---- ----------- --------------- ---- ----------- --------------- ---- ----------- --------------- ------ ------- -------展开代码
在上述代码中，我们通过使用 container 类来定义一个 Flexbox 容器，并设置了一些常用的 Flexbox 属性，如 flex-flow、justify-content、align-items 和 align-content。同时，我们定义了三个 item 子元素，用来展示各种对齐方式的效果。我们将会看到：
- justify-content：我们使用 space-between 属性值将子元素在主轴方向上均匀分配，第一个 item 元素靠左，最后一个 item 元素靠右。
- align-items：我们使用 center 属性值将子元素在交叉轴方向上居中对齐。
- align-content：我们使用 space-between 属性值将子元素在交叉轴方向上均匀分配，并且每个子元素之间会有一定的间隔。
总体而言，上述代码可以让我们更好地理解和应用 Flexbox 布局中的对齐属性，这对于我们构建现代化的用户界面和 Web 应用程序是非常有用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83e3ae46428fe9ee86c52
