- flex 上下文中垂直 margin 不会合并
- flex 主轴方面上子元素的 margin 如果设置为 auto，其该方向上的 margin 是会尽量大的，可以利用这个特性来做对齐
- flex-basis 与 width/height 同时使用时的优先级问题
1、flex container 属性
！flex-direction:row / row-reverse / column / column-reverse; 元素排序方向
！flex-wrap:nowrap / wrap / wrap-reverse; 当父元素宽度不够时是否换行
flex-flow: row wrap; 以上两个属性简写
！justify-content:flex-start / flex-end / center / space-between / space-around; 主(X)轴方向对齐方式
！align-items: stretch / flex-start / flex-end / center / baseline; 侧轴方向对齐方式
align-content:stretch / flex-start / flex-end / center / space-between / space-around; 多行/多列内容对齐方式(用的较少)
flex-direction：元素的排序方向?
row //按行从左排列，类似float：left
row-reserve //按行从右排列，类似float：right
column //按列顺序，自上而下排
column-reserve //按列倒叙
flex-direction
flex-wrap：当父元素宽度不够时是否换行？
nowrap //打死不换行
wrap //换行
wrap-reverse //换行，最前面的先换下去
flex-wrap
justify-content：主轴的对齐方式？
justify-content
ps：当
flex-direction: column / column-reverse时，需要父元素高度 高于 子元素总高度 才生效
2、flex items 属性
！flex-grow 当有剩余空间时，按该比例增加尺寸
！flex-shrink 当空间不够时，按该比例减小
flex-basis 默认大小
order 顺序，数值越小越靠前，但不影响DOM结构(代替双飞翼布局)
align-self: auto / flex-start / flex-end / center / baseline / strerch
flex-grow
flex-grow
flex-shrink
flex-shrink
如果所有元素的 flex-grow/shrink 之和大于等于 1，则所有子元素的尺寸一定会被调整到适应父元素的尺寸（在不考虑 max/min-width/height 的前提下），
而如果 flex-grow/shrink 之和小于 1，则只会 grow 或 shrink 所有元素 flex-grow/shrink 之和相对于 1 的比例。
grow 时的每个元素的权重即为元素的 flex-grow 的值；
shrink 时每个元素的权重则为元素 flex-shrink 乘以 width 后的值。
3、完美居中
#id{
display:flex;
justify-content:center;
align-items:center;
}
完美居中
