伸缩盒布局

Posted xh.w

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伸缩盒布局相关的知识,希望对你有一定的参考价值。

display:flex(注意:所有相关属性都需要加-webkit-前缀)

#website ul:first-child {
display:-webkit-box;
box-pack:justify;
-webkit-box-pack: justify;

display:flex;
display:-webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}

对于支持flex的布局,绿色代码会进行重置,最终显示绿色代码 效果;
对于不支持flex的浏览器,执行蓝色代码,绿色代码被忽略,最终显示 蓝色代码效果。

注意:li中要加上clearfix类,清除 垂直方向外边距重合。(不支持flex布局的浏览器,li设置的margin-top无效)

伸缩盒布局堪称布局神器,有过3次演变历史:
  09:box
  11:flexbox
  12:flex
box基本所有浏览器都支持,但是似乎已经淘汰。
flex是目前最新的属性。

  

以上是关于伸缩盒布局的主要内容,如果未能解决你的问题,请参考以下文章

弹性盒模型(伸缩布局)

CSS3之伸缩布局盒模型

伸缩盒布局

深入了解 Flexbox 伸缩盒模型

弹性盒模型

弹性盒布局