关于Flex布局中的align部分说明
Flex布局中align三大属性的基础知识不会细讲，只会在这稍微回顾一下:
align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式。
align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。
align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。
在这边提一下align-items的默认值stretch，我们只知道是拉伸，至少在学Flex布局的时候就看到:(这个属性对理解后面的很重要)
意思就是在Flex布局中有多个弹性项(items)，通过flex-direction指定一个方向为主轴，那么另一个方向就为侧轴。如果弹性项在侧轴的方向没有写宽度(或高度)，则此时align-items的默认值stretch将会起作用，将弹性项在侧轴方向的宽度(或高度)拉伸至和弹性容器(父盒子)的长度一样。
我之前是混淆了，看到为什么在多条轴线的情况下怎么align-items还会有用，瞬间一下就蒙了，不是说align-items只有在单条轴线的情况下有用么？为什么在多轴的情况下也有用？align-content适用于多条轴线的情况，能用是应该的。可是再一次的想问为什么，为什么align-content也能在我写的只有一行弹性项的demo中起效果？？？
带着一连串问题，在浏览器搜索无果后，以前都是查MDN文档的我，终于也查了一回W3C官方文档。
就一段文字，却讲的非常清楚，感慨英文的伟大。stretch的意思是这些行会拉伸以占据剩余空间，如果剩余空间没有，那么这值等同于flex-start，如果有，剩余空间将会在这些行内被平均的划分，使他们侧轴的尺寸增大。
那么我瞬间想到了，align-content也是有stretch的默认值的!果然是的，
这两张图，一张是align-items的center，另一张是align-content的center，这边肯定是用了flex-wrap :wrap的，要不然弹性项会都挤在一起，但是换行之后垂直方向的弹性项的间隙是哪来的？这个就是align-content的默认值stretch在起怪作用了：
对align-items: center来说，浏览器会计算所有的弹性项在换行之后并且垂直方向紧贴在一起的情况下在侧轴方向上占据了多少长度，除去这个长度(不是用除法啊)，距离侧轴方向的弹性盒子(父盒子)的边还剩余多少，然后把这个剩余的长度平均分配给每一行的弹性项，使其所在的这一行拉伸(不是弹性项拉伸)，最后再把每一行的弹性项放置在拉伸过后的每一行的中央。这里的原理是align-items的默认值已经被覆盖为了center，但是由于是多行弹性项，所以align-content的默认值stretch会起作用，因为没有别的属性覆盖它；(所以个人感觉对多行弹性项使用align-items是比较难用的，尽量避开使用它)
可以简单理解为是这样：
而align-content: center就比较暴力了，直接把所有的弹性项，全部放置在父盒子的中央，align-items只对单轴有效果，所以此时它的默认值stretch不会生效，而且此时align-content的默认值stretch，已经被覆盖为了center，所以此时的默认值是不会起作用的。
强调: 所以这里的概念，是没有问题的。align-content只对多轴有效果，对单轴不起作用;而align-items确实只对单轴有效果，对多轴无效，之所以看上去有效是因为align-content的默认值stretch在起怪作用。
补充: 所以前面说到的align-self并不是一开始就设置为这个属性的，而是把所有弹性项用align-items或者align-content设置为了同一个属性，自己需要有和其他弹性项不同的对齐方式，再用align-self设置为别的属性进行替换。嗯，有这个替换思想是很重要的。
再补充: 那我的demo里面为什么就一行弹性项，没有换行，用align-content设置属性也能起作用？
上图，看伪代码：
问题就在这里，只要加了flex-wrap: wrap，让弹性项换行，无论是否有弹性项会换行，浏览器都会将其解析为多行弹性项。
还有一个align-content的应用：
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>
.container {
display: flex;
flex-flow: row wrap;
background: rgb(185, 185, 185);
height: 10em;
}
.item {
flex: 1 20%;
height: 3em;
background: rgb(156, 252, 255);
}
.item:nth-child(2n) {
background: #79afec;
}
align-content: flex-start;
对，替换思想，把stretch替换为了flex-start，就能消除换行之后的空隙了。
给弹性项加内外边距也是可以的，不会因为align-content合并在一起。内外边距和Flex布局其实并没有关系，完全是独立的，为什么老是要纠结它呢？
