前言
在做网页布局时，经常会出现图片尺寸不统一的情况，这时就需要一种方法，让图片自适应父容器大小，并且垂直居中。CSS Flexbox是一种强大的布局方式，可以轻松实现此目的。本文将向您介绍如何使用 align-self 属性，实现响应式图片布局。
简介
Flexbox 是一种弹性盒子布局模型，它可以让我们更加方便快捷地管理和控制元素在容器中的位置和尺寸，达到响应式的效果。通常，我们会将一组元素放在同一个容器中（即“Flex 容器”），设定容器的样式后，容器内的元素就可以使用 Flexbox 布局了。
其中，align-self CSS 属性是 flex 容器的子元素的属性，在交叉轴上面定位子元素。它可以覆盖容器设定的 align-items 属性，让某个子元素有自己的对齐方式。
实现
我们可以先创建一个 HTML 结构，包含一个 div 容器，容器中有多个图片元素：
<div class="container"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> <img src="5.jpg"> </div>
接着，我们可以在 CSS 中为容器设置 display:flex，实现 Flexbox 布局：
.container {
display: flex;
}这时，图片元素已经使用 Flexbox 布局了，但是图片尺寸不一，且垂直不居中。因此，我们需要使用 align-self 属性，同时在图片元素中设定其值为 center，即垂直居中：
img {
align-self: center;
max-width: 100%;
height: auto;
}在 align-self 属性中设定 center 后，Flexbox 会让图片元素自动垂直居中，而 max-width:100% 可以保证图片在容器中自适应，并且水平居中。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------- ------------------------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
---------- -----
---------- ------
------- - -----
-
--- -
----------- -------
---------- -----
------- -----
------- -----
-
--------
-------
------
---- ------------------
---- ------------
---- ------------
---- ------------
---- ------------
---- ------------
------
-------
-------总结
CSS Flexbox 是一种强大的布局方式，可以轻松实现响应式和自适应布局。align-self 属性可以让我们更加灵活的控制子元素的垂直对齐方式，相比较于使用其他布局方式，更加简单和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fece3095b1f8cacdd79e6d