flex布局

• 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;
}

完美居中

4、flex青蛙游戏 、 一个网站