目录：
1.准备工作
2.属性解析： align-items
3.属性解析： align-content
4.弹性元素的属性
一、准备工作
我们在前面的基础上，修改代码，把ul的高度定下来，设置800px, li的高度不定。
然后，body里面添加div.
代码如下：
<style>*{margin: 0;padding: 0;list-style: none;}ul{width: 800px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;}li{width: 200px;text-align: center;font-size: 28px;line-height: 100px;/* 让所有的li伸缩系数为0，即他们都不会伸缩，该超出边框的就超出 */flex-shrink: 0;}li:nth-child(1){background-color: #bfa;}li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;}</style>
<body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li></ul></body>
二、属性解析： align-items
- align-items
- 元素在辅轴上如何对齐
- 元素间的关系（比如上面的1和2, 2和3 这些元素之间的对齐方式）
- 可选值：
- stretch 默认值，将元素的长度设置为相同的值
<style>*{margin: 0;padding: 0;list-style: none;}ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 元素之间的关系 */align-items: stretch;/* 多的li进行换行 */flex-flow: row wrap;}li{width: 200px;text-align: center;font-size: 28px;line-height: 100px;/* 让所有的li伸缩系数为0，即他们都不会伸缩，该超出边框的就超出 */flex-shrink: 0;}li:nth-child(1){background-color: #bfa;}li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;}li:nth-child(4){background-color: yellow;}li:nth-child(5){background-color: chocolate;}</style><body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul></body>
这个第一行的高度一样，第二行的高度一样，这就是stretch 定义的相同的值。 是行与行之间的高度，并不是所有元素高度都一样。
本来1他内容撑开的高度很矮，设置了stretch后，他会为了匹配大家相同的高度，把自己的高度拉长
- flex-start :元素不会拉伸，而是沿着辅轴起边对齐
比如目前我们的主轴是水平方向，辅轴就是垂直方向，所以这里的起边，就是顶部上方。
ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 因为辅轴是纵向，所以起边就是顶部上方，因此这里控制他是每行元素顶部对齐 */align-items: flex-start;/* 多的li进行换行 */flex-flow: row wrap;}
- flex-end :元素不会拉伸，而是沿着辅轴的终边对齐
同理
ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 因为辅轴是纵向，所以终边就是底部，因此这里控制他是每行元素底部对齐 */align-items: flex-end;/* 多的li进行换行 */flex-flow: row wrap;}
- center :元素不会拉伸，而是居中对齐
同理
ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 因为辅轴是纵向，每行元素的中心对齐*/align-items: center;/* 多的li进行换行 */flex-flow: row wrap;}
应用：需求是要求元素li，在元素ul里面垂直水平，双方向对齐居中。
ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* ul里面的元素li，水平垂直方向都居中，关键是这两行代码。justify-content: center; align-items: center;*/justify-content: center;align-items: center;/* 多的li进行换行 */flex-flow: row wrap;}li{width: 200px;text-align: center;font-size: 28px;line-height: 100px;/* 让所有的li伸缩系数为0，即他们都不会伸缩，该超出边框的就超出 */flex-shrink: 0;}
<ul><li>1</li></ul>
- baseline :基线对齐 （用的不多，主要针对文字,沿着文字的基线对齐）
三、属性解析： align-content
- align-content：设置辅轴上的空白空间分布。
我们知道主轴上有空白空间，辅轴上也有空白空间。
align-items是控制横向，元素之间的对齐的, 对应的align-content是对齐元素之间的空白的。
- 可选值：
- align-content: center; :让辅轴上下的空白相等，元素在中间
<style>*{margin: 0;padding: 0;list-style: none;}ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 辅轴上，元素之间是顶部对齐 */align-items: flex-start;/* 辅轴上，上下空白相等 */align-content: center;/* 多的li进行换行 */flex-flow: row wrap;}li{width: 200px;text-align: center;font-size: 28px;line-height: 100px;/* 让所有的li伸缩系数为0，即他们都不会伸缩，该超出边框的就超出 */flex-shrink: 0;}li:nth-child(1){background-color: #bfa;}li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;}li:nth-child(4){background-color: yellow;}li:nth-child(5){background-color: chocolate;}</style>
<ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul>
- align-content: flex-start; :让辅轴上空白在下面，元素在辅轴的上方
- align-content: flex-end :让辅轴上空白在上方，元素在辅轴的下方
- align-content: space-around :让辅轴上空白在环顾在每行的上下两边
- align-content: space-between :让辅轴上空白在中间
总的来说，就是通过指定空白的位置，来对齐两行元素。
四、弹性元素的属性
- align-self:用来覆盖当前弹性元素上的align-items
本来我们在ul 统一设置了 align-items: flex-start; 也就是说ul下的子元素li都有这个属性，但是现在我想针对第一个li，单独设置他的align-items, 此时我们就用align-self 来覆盖。
- 关键代码：
li:nth-child(1){/* align-self:用来覆盖当前弹性元素上的align-items这li的第一个元素，设置了这个后，会把原来设置过的align-items样式覆盖掉*/align-self:stretch;}
- 完整代码：
<style>*{margin: 0;padding: 0;list-style: none;}ul{width: 600px;height: 800px;border: 10px red solid;/* 设置ul为弹性元素 */display: flex;/* 辅轴上，元素之间是顶部对齐 */align-items: flex-start;align-content: space-between;/* 多的li进行换行 */flex-flow: row wrap;}li{width: 200px;text-align: center;font-size: 28px;line-height: 100px;/* 让所有的li伸缩系数为0，即他们都不会伸缩，该超出边框的就超出 */flex-shrink: 0;}li:nth-child(1){/* align-self:用来覆盖当前弹性元素上的align-items这li的第一个元素，设置了这个后，会把原来设置过的align-items样式覆盖掉*/align-self: stretch;background-color: #bfa;}li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;}li:nth-child(4){background-color: yellow;}li:nth-child(5){background-color: chocolate;}</style>
<body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul></body>
