「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

效果图:

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

效果图:

flex

  • 3.完美居中

这个就更简单了,在父元素上添加三行代码即可下班:

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}
posted @ 2018-11-09 17:46  小粒旬  阅读(158)  评论(0编辑  收藏  举报