align-items 这个属性可以设置项目在容器里的垂直方向的对齐方式 .. 这里我们先给容器设置一个高度 .. 比如设置成 300px ..

你会看到，除了内边距以外 .. 这个容器里的项目的高度现在跟容器的高度是一样的 .. 在这个容器里面，添加一个 align-items 属性 .. 它的值默认是 stretch .. 意思是拉伸 ... 也就是会把项目的高度拉伸，让它跟容器的高度一样 ..

下面把它设置成 flex-start .. 现在项目会靠着容器的最上面显示 .. 这个 flex-start 的意思是容器的垂直这个轴的起点，就是那个 cross start ..

再把它设置成 flex-end .. 项目会出现在容器的底部 .. 就是让项目在 cross end 这个点上显示 ..

居中，可以用一个 center .. 另外还有一种叫 baseline 的对齐方式 .. 基线对齐 .. 先把这个 align-items 属性的值设置成 baseline ..

现在项目都是靠着 cross 轴的上边显示 ..

下面我们可以修改一下第一个项目的边距 .. 给它添加一个上边的内边距 .. 设置一下 padding-top .. 设置成 50px .. 这样这个项目会比其它的项目都高一点 .. 因为现在使用了 baseline 的对齐方式 .. 所以其它的项目的位置也会作出调整 .. 应该使用的是项目里的内容作为这个 baseline ..

再给这里的第三个项目也添加一点边距 .. 添加一个 padding-top 属性 .. 设置成 70px .. 同样容器里的项目会根据这个项目的高度调整它们的对齐方式 ..