css3中webkit-box的实现多栏自适应布局

浏览数：30 / 时间：2015年06月09日

我们经常会在手机端看到这种布局，要适应各种分辨率：

技术分享

之前要实现横列的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;
}