本文已参与「新人创作礼」活动，一起开启掘金创作之路。
最近使用flex布局时，发现flex容器上有两个很相似的属性，align-items 和 align-content，那到底使用哪个，他们之间的区别又是什么呢，下面我们来瞅一瞅
1. flex
首先我们来回顾一下，flex容器上面都有哪些属性值，简单介绍下
- flex-direction
- 属性决定主轴的方向（即项目的排列方向），有四个可选值
- row：默认值，主轴为水平方向，起点在最左端，使用频率比较高的
- row-reverse：主轴为水平方向，起点在最右端
- column：主轴为垂直方向，起点为最上端，使用频率比较高的
- column-reveres：主轴为垂直方向，起点在最下方
- 属性决定主轴的方向（即项目的排列方向），有四个可选值
- flex-wrap
- 如果一条主轴线上面如果一行放不下，该如何换行，有三个可选值
- nowarp：默认，不换行
- warp：换行第一行在最上面
- warp-reverse：换行第一行在最下方
- 如果一条主轴线上面如果一行放不下，该如何换行，有三个可选值
-
flex-flow
- 是
flex-direction和flex-warp的简写属性，默认值 row nowarp
- 是
-
justify-content
- 决定项目主轴方向的对齐方式
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中，使用频率比较高的
- space-between：两端对齐，项目中间的间隙相等
- space-around：项目中间的间隙，是左右两边间隙的一倍大小
- 决定项目主轴方向的对齐方式
-
align-items
- 决定项目在交叉轴的对齐方式
-
align-content
- 决定了多个轴线的对齐方式，如只有一条轴线，该属性没有效果（如容器flex-warp为warp，单轴线也会起作用）
2. align-items
决定项目在交叉轴上的对齐方式，可选值有五个
- stretch：默认值，项目没有设置高度，元素被拉伸以占满整个容器的高度
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐，使用频率比较高的
- baseline: 项目的第一行文字的基线对齐
3. align-content
决定了多个轴线的对齐方式，如只有一条轴线，该属性没有效果，但是容器flex-warp属性设置为warp，单轴线align-content也会有效果，可选值有六个
- stretch：默认值，项目没有设置高度，元素被拉伸以占满整个容器的高度
- flex-start：交叉轴的起点对齐，位于元素的开头
- flex-end：交叉轴的终点对齐，位于元素的结尾
- center：交叉轴的中点对齐，使用频率比较高的
- space-between：在交叉轴的两端，中间间隙相等
- space-around：每个轴线两侧的间隔都相等
