CSS Flexbox 是一种新的布局方式，它可以简单易用地实现复杂的布局效果。其中 align-self 属性可以在 Flex 容器内控制单个 Flex 项目的垂直对齐方式。本文将详细介绍 align-self 属性的使用方式及其示例代码。
align-self 基本介绍
align-self 属性定义 Flex 项目在垂直方向上的对齐方式。默认值为 auto，即继承父元素的对齐方式。可以设置以下值：
- auto：默认值，继承父元素对齐方式
- flex-start：顶端对齐
- flex-end：底部对齐
- center：居中对齐
- baseline：基线对齐
- stretch：拉伸对齐（占据全部空间）
align-self 示例代码
下面的示例中，我们使用了 3 个 Flex 项目来演示 align-self 属性的使用：
--------- -----
------
------
-------
---------- -
-------- -----
------- ------
----------------- --------
-
----- -
------ ------
------- -----
----------- -------
-
------- -
----------- -----------
----------------- --------
-
------- -
----------- -------
----------------- --------
-
------- -
----------- ---------
----------------- --------
-
--------
-------
------
---- ------------------
---- ----------- ---------------
---- ----------- ---------------
---- ----------- ---------------
------
-------
-------其中，.container 定义了 Flex 容器属性，包括 display: flex 和 height 等属性。.item 定义了 Flex 项目的基本属性，包括宽度和文字居中等属性。.item-1、.item-2 和 .item-3 分别定义了三个不同的 Flex 项目，并设置了不同的 align-self 属性值。
上述代码的运行结果如下图所示：
通过 align-self 属性，我们可以很方便地实现多种不同的垂直对齐方式，从而达到灵活的布局效果。
align-self 拓展应用
除了基本的垂直对齐外，align-self 还有一些拓展应用，比如实现“居中对齐 + 拉伸”，从而实现高度完全自适应的效果。
下面的示例代码中，我们使用了两个 Flex 项目，第一个项目在垂直方向上居中对齐，第二个项目在垂直方向上拉伸并填充全部空间。
--------- -----
------
------
-------
---------- -
-------- -----
------- ------
----------------- --------
-
------- -
------ ------
----------------- --------
----------- -------
----------- -------
-
------- -
----------------- --------
---------- --
-
--------
-------
------
---- ------------------
---- ----------- ----------- ------ ----------
---- ----------- --------------
------
-------
-------上述代码的运行结果如下图所示：
通过 align-self 和 flex-grow 属性，我们实现了一个高度自适应的 Flex 布局效果，可以用于实现一些特殊的布局需求。
总结
align-self 属性是 CSS Flexbox 布局中的一个重要属性，可以控制单个 Flex 项目在垂直方向上的对齐方式。本文介绍了 align-self 的基本用法和一些拓展应用，并给出了示例代码，希望对读者理解 Flexbox 布局和实现一些复杂的布局效果有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c8e31f5ad90b6d0414fe0e