我所知道的弹性盒子模型

　　弹性盒子是css自适应布局的一种好用的方法，有了它可以减少浮动的使用（避免清浮动）.

　　首先考虑一下兼容性

　　基本高版本主流浏览期都兼容,不过需要加前缀最新写法为display:flex但是实际很多国产浏览器并不兼容,所以我还是用的display:box的写法并没有兼容两种.

　　所以主要介绍-webkit-box,想了解flex属性可以查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html（用法不太一样呀回来要整理整理）

　　写法为父级display后，子元素自动成为容器成员,并且float、clear和vertical-align属性将失效.

.box{
        display:box;
        display:-webkit-box;/*(会与display:block冲突)*/
        -webkit-box-align:center;
        -webkit-box-pack:center;
    
}    /*(主要做移动端只加了webkit)*/

　　父级容器box-align表示子集在y轴的排列方式 start | end | center | baseline | stretch start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐，stretch 伸缩和父级等高.

　　父级容器box-pack表示子集在x轴的排列方式 start | end | center | justify 与父标签的起始位置对齐末尾居中两端对齐

　　box-pack-justify两端对齐可以用来设置两端对齐的标题例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            display:-webkit-box;
            display:-moz-box;
            display:box;
            -webkit-box-align:center;
            -webkit-box-pack:justify;
            padding:0 20px;
            color:#fff;

        }
        .tit div:nth-child(1){
            height:40px;
            width:60px;
            background:#000;
            text-align:center;
        }
        .tit div:nth-child(2){
            height:30px;
            width:40px;
            background:#000;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class='tit'>
        <div>左</div>
        <div>右</div>
    </div>
</body>
</html>

如果背景相同可以设置两端对齐也可以用table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            padding:0 20px;
            color:#fff;
            display:table;

        }
        .tit div:nth-child(1){
            height:40px;
            width:60px;
            text-align:left;
            display:table-cell;
            vertical-align: middle;
        }
        .tit div:nth-child(2){
            height:30px;
            width:40px;
            text-align:right;
            display:table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class='tit'>
        <div>左</div>
        <div>右</div>
    </div>
</body>
</html>

box-orient可以设置排序方式 horizontal(水平) vertival (垂直)

子集容器可以设置-webkit-box-flex属性

表示占父级容器分割的分数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            padding:0 20px;
            color:#fff;
            display:-webkit-box;
            display:-moz-box;
            display:box;
        }
        .tit div:nth-child(1){
            height:40px;
            background:#000;
            -webkit-box-flex:1;/*占总数1/3*/
        }
        .tit div:nth-child(2){
            height:30px;
            -webkit-box-flex:2;/*占总数2/3*/
            background:#000;
        }
    </style>
</head>
<body>
    <div class='tit'>
        <div>左</div>
        <div>右</div>
    </div>
</body>
</html>

注意: 如果两个box-flex 的值设置相同, 会均分父级宽度。注意如果子集内容不同，会出现不能均分情况需要加个任意宽度 ,width:0%;width:100%;之类的都可以.

<div class='tit'>
        <div>左123</div>
        <div>右456888</div>
</div>

秒客网

我所知道的弹性盒子模型

相关文章