CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要 适应不同的屏幕大小以及设备类型 时确保元素拥有恰当的行为的布局方式。
通过display:flex|inline-flex; 来指定盒子类型
区别：
- inline-flex对外表现为块级元素
- flex对外表现为行内元素
- inline-flex和flex对内表现一样
弹性父元素属性
flex-direction
指定了弹性子元素在父容器中的位置。
1 | flex-direction: row | row-reverse | column | column-reverse |
juestify-content
设置弹性盒子在主轴方向上的对齐方式，即flex-direction指定的方向
1 | justify-content: flex-start | flex-end | center | space-between | space-around |
与侧轴方向上的对其既有相同，又有不同； 戏称为空隙问题
主轴方向为子元素排列方向，空隙需要大家共享
而align-items为侧轴方向，每个位置只有一个子元素，所以空袭牵涉到拉伸
align-items
设置弹性盒子元素在侧轴上的对齐方式
1 | align-items: flex-start | flex-end | center | baseline | stretch |
flex-wrap
作为flex布局的重要属性，语法如下：
1 | flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; |
align-content
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
即： 当flex-wrap起作用发生换行时，该属性控制每行的对齐方式
当然，如果改变了flex-direction，则为列的对齐
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。
1 | flex-flow: <flex-direction> || <flex-wrap>; |
弹性子元素属性
order
排序，用整数值来定义排列顺序，数值小的排在前面。可以为负值。
对齐 💎💎💎
设置”margin”值为”auto”值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为”auto”，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
- 完美居中
- 一边边距固定，一边居中
- 居左/居右
align-self
align-self 属性用于设置 弹性（子）元素自身在侧轴（纵轴）方向上的对齐方式。
flex
flex 属性用于指定弹性子元素如何分配空间
1 | flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] |
近期看到一篇flex对教程，看到几个没接触过的样式，在这里记录一下
flex-grow
flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。
如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。
flex-shrink
flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
如果所有项目的 flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。
负值对该属性无效。