TAT.sheran 浅谈flexbox的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 7,843
17

     flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用float:

 

         图片1 

 

 

但当只有2个排名后,少了一个li节点后,就会展示如下:

 

          图片2

 

删除两个li节点后如下:

 

图片3

 

但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的:

减少一个li节点后:

 

图片4

 

删除两个li节点后如下:

 

图片5

 

那么这里用display:flex布局是最好不过的了,新的flexbox布局模式被用来重新定义CSS中的布局方式:

 

可见用flex布局非常完美,这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器,也可以这样写:

display: flex;display: -webkit-box;这两个属性的方法作用相同。

 

Example 2: flexbox不等分布局

 

效果如下图所示:

 

图片7

 

Example 3: flexbox基本页面布局

 

       

效果如下图所示:

图片6

Example 4: flexbox的居中布局

 

图片8

 

使用flexbox你还可以做的更多,这里只是一些让你了解概念的例子,想了解更多请看:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/05/xi-shuo-flexbox-dan-xing-he-zi-bu-ju/

  1. 低调的风 2016 年 3 月 14 日

    flex如果能兼容大多浏览器,还是你很不错的,但是目前看来兼容性不好,好多浏览器不支持。

  2. ScarFace 2016 年 1 月 14 日

    你好,请问flex布局如何控制内容溢出呢?比如我现在有个固定的DIV内纵向三个DIV,我希望第三个DIV占30px,前两个DIV各占剩下的50%, 我们假设是300px. 然后这两个DIV内都有高度为400px的子元素,那怎么让这两个DIV出现滚动条, 如不介意, 希望可以加QQ详谈. 262959969

  3. 罗志滔 2015 年 12 月 27 日

    必须设置height就没意思了。不然我直接用margin:-height/2 auto 0;不更好理解?!

  4. 53 2015 年 12 月 7 日

    1234

  5. 思聪前女友 2015 年 10 月 26 日

    [痛哭]

  6. 自由奋斗 2015 年 10 月 10 日

    IE9不支持求教!

  7. 云库网 2015 年 9 月 29 日

    弹性盒子非常好用 – 云库网

  8. 歪妖内涵网 2015 年 9 月 1 日

    无意溜达到了这里,留下足迹

  9. 易翰 2015 年 8 月 13 日

    我这边一直做移动开发,关于楼上说的问题我却没有遇到过,安卓各版本的兼容性没有什么问题。首先我感觉还是得对移动端设备使用的是什么内核然后是理解box-flex的原理,特别注意设置固定宽度的影响

  10. horcrux 2015 年 8 月 11 日

    安卓下flex是个巨坑,莫踩各种版本的flex差别很大,安卓下面有的重要属性干脆测底不支持了

    • TAT.yunsheng

      TAT.yunsheng 2015 年 8 月 19 日

      用的flex还是-webkit-box啊

  11. 李家良 2015 年 5 月 26 日

    移动端亲测感觉还有挺多不兼容问题,如纳入标准是好事。

  12. Capricair 2015 年 5 月 25 日

    水平垂直居中不是早有absolute-center方式了么
    .absolute-center{
    top:0; left:0; right:0; bottom:0;
    position: absolute;
    margin: auto;
    }
    不过必须设置height
    浏览器对flex的支持目前还不是很理想

  13. ed 2015 年 5 月 22 日

    微信安卓版内置的浏览器QQB5.4只支持到flex布局的第二版,也就是display:-webkit-box;
    这版本,而且有个坑是
    父元素设置了display:-webkit-box;
    子元素也要设置display:-webkit-box;
    这样子元素身上的-webkit-box-flex:1;才会生效。

  14. menghui9898 2015 年 5 月 20 日

    之前做手机端页面用了这个属性,后来发现安卓4.0以下的系统全军覆没,加上prefix也不行==。
    就全改成table-cell了。
    感觉pc端跟移动端现在都不能全面支持flex属性,还是少用为妙。。。。

    • element 2015 年 5 月 20 日

      这个要看自己的用户分布

    • heng 2015 年 5 月 21 日

      用最旧版语法混搭新版语法 除了不支持自动换行之外 其他都支持 所有手机都支持 包括windoes phone

发表评论