每一个 row 容器里面包装的 column 内容，我们可以去设置它们的垂直的对齐方式，

可以去设置一下 .. 这里我们先给 row 添加一个高度 .. 不然它的高度跟它里面的内容的高度是一样的 .. 先给它设置成 30vh ..

现在这排内容里面的垂直的对齐就是就是在顶部对齐 .. 这就相当于是在 row 这个容器上，添加一个 align-items-start .. 它就是 row 里面的内容的默认的垂直的对齐方式 ..

再把它改成 align-items-end .. 这样它里面的内容会在底部对齐 ... 想让它们垂直居中在 row 容器里面显示，可以用一下 align-items-center ..

align-self*

align-items 后面加上位置可以设置每排内容里面的所有元素的垂直对齐方式 .. 我们也可以单独去设置某个 column 在 row 容器里的垂直对齐 ..

比如在第一栏这个元素上添加一个 align-self-start .. 这样不管包装它的 row 容器上设置的对齐是什么，这栏内容会按照它自己设置的方式去对齐 ...

在第二栏内容上添加一个 align-self-center，它会让元素垂直居中 .. 在第三栏内容上，再用一个 align-self-end

这样第三栏内容会在底部对齐..

CSS

实际上这些对齐用的类里面主要用了 flexbox 相关的样式 .. 可以再去检查一下 ..

选中这个 row 元素 ... 注意它上面的 align-items-center 这个类里面定义的样式 .. 就是用了一个 align-items ，对应的值是 center ..

再选中一个 column 元素 .. 这个元素上用了 align-self-start，它里面的样式就是使用了 css 的 flexbox 里的 align-self ，设置了一下对齐 ... 这里对应的值设置成 flex-start ..

再选中第三栏这个元素 .. 上面用了 align-self-end ，这个类上面定义的样式就是把 align-self 设置成了 flex-end ..