本篇介绍了容器属性align-items的知识点，用来设置项目在交叉轴方向上的对齐方式，最后又提了一个垂直水平方向居中的应用。

阅读时间大约5~10分钟。

和 justify-content 类似，align-items 属性用来设置项目在交叉轴方向上的对齐方式。语法格式如下：

其中：

下面看示例，因为 stretch 是默认值，我们先从这个例子开始。

示例1，有一个div（容器，450px），容器内包含3个div（项目，flex-basis 为50px），设置 align-items 为 stretch：

运行效果： 和之间效果一样，因为 stretch 是默认值的原因了，这个词中文意思也是拉长的意思了。

示例2，接上例，设置 align-items 为 flex-start：

运行效果： 沿着交叉轴起点开始对齐。

示例3，接上例，设置 align-items 为 flex-end：

运行效果： 沿着交叉轴尾部开始对齐。

示例4，接上例，设置 align-items 为 center：

运行效果： 上下距离相等，这个就是居中的意思了。

示例5，接上例，设置 align-items 为 baseline：

运行效果： 看起来这个和示例2设置为 flex-start 一模一样？那有什么区别呢？

baseline 的说明是文字对齐。我们尝试给 item1 增加一个上内边距：

运行效果： 意思很明了，就是按照文字对齐。

align-items常用的一个就是用来做垂直居中了。

实例1，有如下html代码，div宽200px、高100px，请让文字上下垂直居中：

居中以前一直是一个麻烦的问题，左右居中还有，上下居中就有点麻烦。

这边用flex布局就很快了，思路就是设置 align-items 为 center 就可以了，参考如下代码：

运行效果：