「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 完成手机页面布局

JS bin

效果图：

在实现这个 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;
}