Flex容易遗忘的部分

结合自己屡屡记忆又常常忘记的体质，把Flex容易遗忘的部分记录在文档中吧。

属性融合写法，导致自己经常不认识的属性
1. flex-flow是flex容器盒子的flex-direction和flex-wrap的融合写法。
2. flex:1是flex-grow、flex-shrink 、flex-basis的融合写法。
flex-shrink 、flex-basis两个可以省略，故flex:1代表的是flex-grow.

最容易混淆的属性
1. justify-content vs align-content. 这两者共同的特点是它们控制的容器行，而不同的点在于一个控制横向的主轴对齐方式，一个控制的纵轴对齐方式，容器行是以组为单位的。如果仅有flex布局的盒子仅有一行（flex: wrap或者wrap-reverse的前提下才有效果)，那么就没有纵轴对齐的意义。这就是我们通常不用align-content属性的原因，我们的实际业务中，通常只有一个容器行。
2. align-content vs align-items。align-content是关于多行纵轴的对齐， align-items是关于容器行里面的元素如何对齐主轴的属性。

理解的模棱两可的属性
1. flex布局后,文档流发生了什么变化？
flex布局后，不遵循一般的文档流，float浮动相关的属性失效，也就是有了flex没有浮动，但是定位仍然有效
2. flex:1代表什么？
flex:1是flex-grow、flex-shrink 、flex-basis的融合写法。
flex-shrink 、flex-basis两个可以省略，故flex:1代表的是flex-grow.
flex-grow默认是0，如果有值，且几个子项的值之合大于1，那么则按照它们的所占比例分割这一行的剩余空间。
比如有三个盒子分别定义了flex:1、flex:2、flex:1；那么代表中间的盒子占剩余空间的50%，其他两个占25%。
3. align-items代表什么？
代表着子项目在容器行里面的对齐方式，但是仍然是主轴的对齐，start,end,center等。items是复数代表了控制的是多个元素。与align-self比较的话，self仅仅控制自身，故align-items是管理容器行里面多个元素的，是父亲盒子的属性，self是控制子元素的属性。
4 .容器行的纵轴可以调整吗？
align-items调整的是容器行里面元素的主轴对齐方式，那纵轴呢？因为容器行仅代表一行的的概念，没有多行，故而纵轴方向就不需要考虑了。
被忽略的默认值，导致理解属性有偏差
1. align-content属性的值stretch是默认的。这也就是为什么当我们定义一个flex容器，给了高度之后，里面的元素虽然没有给高度，但是全部占满了。