标签：
我们经常会在手机端看到这种布局，要适应各种分辨率：
之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。但是用flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
关于盒模型的几个属性：
box-orient 子元素排列 vertical or horizontal
box-flex 兄弟元素之间比例，仅作一个系数
box-align box 排列
box-direction box 方向
box-flex-group 以组为单位的流体系数
box-lines
box-ordinal-group 以组为单位的子元素排列方向
三列自适应布局有padding，有边框，用flexible box实现
<div class="shop_info_nav"> <div class="shop_info_btn"> <a href="javascript:;" class=‘btn‘> <span>全部商品</span> <i>16</i> </a> <a href="javascript:;" class=‘btn btn_item‘> <span>最新上架</span> <i>2</i> </a> <a href="javascript:;" class=‘btn btn_item btn_sort‘> <span>商品分类</span> <i></i> </a> </div> </div>
css代码：
.shop_info_nav { border-top: 1px solid #D7D7D7; } .shop_info_btn { padding-top: 10px; margin:0px 10px; display: -webkit-box; } .shop_info_btn .btn { display: block; position: relative; -webkit-box-flex:1; height:43px; -webkit-box-sizing:border-box; box-sizing:border-box; color:#666; text-align: center; } .shop_info_btn .btn_item:after { height:32px; width:1px; content: ‘‘; background: #DCDCDC; display: block; top:0px; position: absolute; } .shop_info_btn span { font-size: 14px; } .shop_info_btn i { display: block; margin-top: -4px; } .btn_sort i { background-image: url(../images/v4_spr_3.png); background-repeat: no-repeat; background-size: 14px auto; background-position: 0px -12px; width:14px; height:14px; margin: 0 auto; }
利用flexible box即可快速实现
标签：
原文地址：http://www.cnblogs.com/micotan/p/4510196.html
