欢迎关注路条编程的公众号，通过学习 CSS Flexbox 弹性布局这一系列文章，你将会逐步掌握 Flex 布局相关的知识。
使用 align-items 属性对齐元素,示意图片如下所示：
align-items 属性与 justify-content 类似。回忆一下，justify-content 属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。
Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。
CSS 提供了 align-items 属性，可以用于在交叉轴调整 flex 子元素。对于行，它规定了项目在容器中应该靠上还是靠下，而对于列，就是靠左或靠右。
align-items 属性语法示例如下所示：
<style type="text/css">.container {align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;}</style>
align-items 属性有多个属性值，属性值及描述如下所示：
stretch ：(默认值)拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。
flex-start / start / self-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。
flex-end / end / self-end ：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。
center ：把项目的位置调整到中间。对于行，垂直居中（项目上下方空间相等）。对于列，水平居中（项目左右方空间相等）。
baseline ：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。
注意：safe 和 unsafe 修饰符关键字可以与所有其他关键字一起使用（注意浏览器是否支持），帮助防止无法访问内容对齐元素。
调整页面框架模块 5 ，模块 6 内容。模块 5 分为上中下三部分，每一部分显示 4 个项目， 通过容器类 .container-dashed 进行上中下三部分区分。为了显示 5 种常用属性样式，增加了 .align-items-start、.align-items-end、.align-items-center、.align-items-baseline、.align-items-stretch 5 种样式类。第一部分显示 flex-start：交叉轴的起点对齐。容器元素增加样式类 .align-items-start ， 为了区别每个项目的高度，增加了 .box-heigh, .box-short 两个样式类，项目 2 增加样式类 .box-heigh, 项目 3 增加样式类 .box-short。第二部分显示 flex-end：交叉轴的终点对齐。第三部分显示 center : 居中。第二三部分项目样式设置详情请看 html 代码部分。模块 6 分为上下两部分，第一部分显示为 baseline: 项目的第一行文字的基线对齐，第二部分显示为 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。项目具体设置详情请看 html 代码部分。
增加的样式类如下所示：
<style type="text/css">.align-items-start {align-items: flex-start;margin-top: 10px;}.align-items-end {align-items: flex-end;margin-top: 10px;}.align-items-center {align-items: center;margin-top: 10px;}.align-items-baseline {align-items: baseline;margin-top: 10px;}.align-items-stretch {align-items: stretch;margin-top: 10px;}.box-heigh {line-height: 40px;}.box-short {line-height: 10px;}</style>
调整的模块 5 部分 html 代码如下所示：
<article class="article ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6"><div class="card"><div class="container title justify-content-center">justify-content 属性示例</div><div class="container">flex-start(默认值) : 左对齐</div><div class="container-dashed nowrap justify-content-start"><div class="box box-item1">1</div><div class="box box-item2">2</div><div class="box box-item3">3</div><div class="box box-item4">4</div></div><div class="container">flex-end : 右对齐</div><div class="container-dashed nowrap justify-content-end"><div class="box box-item5">5</div><div class="box box-item6">6</div><div class="box box-item7">7</div><div class="box box-item8">8</div></div><div class="container">center : 居中</div><div class="container-dashed nowrap justify-content-center"><div class="box box-item1">1</div><div class="box box-item2">2</div><div class="box box-item3">3</div><div class="box box-item4">4</div></div></div></article>
调整的模块 6 部分 html 代码如下所示：
<article class="article ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6"><div class="card"><div class="container title justify-content-center">justify-content 属性示例</div><div class="container ft12 ">space-between:两端对齐,项目之间间隔都相等。</div><div class="container-dashed nowrap justify-content-between"><div class="box box-item5">5</div><div class="box box-item6">6</div><div class="box box-item7">7</div><div class="box box-item8">8</div></div><div class="container ft12 ">space-around:每个项目两侧的间隔相等。</div><div class="container-dashed nowrap justify-content-around"><div class="box box-item1">1</div><div class="box box-item2">2</div><div class="box box-item3">3</div><div class="box box-item4">4</div></div></div></article>
保存页面代码，预览页面，整体效果图如下所示：
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
