「CSS Warning」几个 flex demo
CSS Warning
在 flex 布局之前，有各种布局方式：
-
float + clear
-
position relative + absolute
-
display inline-block
-
负边距(margin)
等。而 flex 作为一种布局方式，在很早之前就已经出现了，只不过碍于兼容性问题，才没有得到大范围的使用。
但现在已经 8102 年啦~兼容性问题也得到了非常大的改善，愉快地使用 flex 吧~
网上高质量的 flex 教程多如牛毛，我也无意再花时间赘言，这里主要是通过写几个小 demo 来实践下阮一峰老师的 flex 教程。
/* flex 最重要的几个属性 */
父容器属性：
flex-direction：主轴的方向。
flex-wrap：超出父容器子容器的排列样式。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。
justify-content：子容器在主轴的排列方向。
align-items：子容器在交叉轴的排列方向。
align-content：多根轴线的对齐方式。
子容器属性：
order：子容器的排列顺序
flex-grow：子容器剩余空间的拉伸比例
flex-shrink：子容器超出空间的压缩比例
flex-basis：子容器在不伸缩情况下的原始尺寸
flex：子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写
align-self
- 1.使用 flex 完成手机页面布局
效果图：
在实现这个 demo 的时候，遇到了一个问题：
当 header / main / footer 都设置了 display:flex 时，每当 main 当中的元素（mian>ul>li）增加 margin 或者 padding 的时候，header 和 footer 的高度都会被挤压变小（header 和 footer 在此之前已经设置好了固定高度）；
而当把 header 和 footer 的 display:flex 属性去掉后，main 的内容的 margin 和 padding 增加不会影响到 header 和 footer 的高度。
原因：当一个元素的属性设置了 display:flex 的时候，他有一个默认属性 flex-shrink。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
解决办法：给 header 和 footer 设置 flex-shrink:0;
- 2.使用 flex 完成双飞翼布局
demo:JS bin
效果图：
- 3.完美居中
这个就更简单了，在父元素上添加三行代码即可下班：
.parent{
display:flex;
justify-content:center;
align-items:center;
}
