TAT.sheran 浅谈flexbox的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 7,503
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. flex如果能兼容大多浏览器,还是你很不错的,但是目前看来兼容性不好,好多浏览器不支持。

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

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

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

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

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

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