Flex布局

虽然接触Flex布局很久啦，但从来没在项目中使用过，一来原有布局方式也能满足需求，二来为了兼容性Flex各种版本的写法真是蛋疼...今天刚好闲的蛋疼

//居中
.vh-cen{
    display: -webkit-box;
    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}
//Less中常用
.flex-box(){
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flex(@v){
    -webkit-box-flex:@v;
    -moz-box-flex:@v;
    -webkit-flex:@v;
    -ms-flex:@v;
    flex:@v;
}
//注意注意
CSS的columns在伸缩容器上没有效果。
float、clear和vertical-align在伸缩项目上没有效果
width: 0%;
display: block;旧版对伸缩项目要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div[class^=box]{
        width: 150px;
        height: 150px;
        background-color: #0ff;
        margin: 10px;
        float: left;
    }
    span{
        display: block;
        width: 50px;
        height: 50px;
        background-color: #333;
        border-radius: 50%;
    }

    .box{
        display: flex;
        justify-content: center;/*主轴方向对齐方式*/
        align-items: center;/*交叉轴方向对齐方式*/
    }
    
    .box2{
        display: flex;
        flex-direction: column;/*决定主轴的方向*/
        justify-content: space-between;/*主轴方向对齐方式*/
        align-items: center;/*交叉轴方向对齐方式*/
    }

    .box3{
        display: flex;
    }
    .box3 .item:nth-child(2){
        align-self: center;/*自己的对齐方式可覆盖align-items属性。默认值为auto*/
    }


    .box4{
        display: flex;
        justify-content: space-between;/*项目顶边，中间留空*/
    }
    .box4 .item:nth-child(2){
        align-self: flex-end;
    }

    .box5{
        display: flex;
        /*width: 200px;
        justify-content: space-between;*/
    }
    .box5 .item:nth-child(2){
        align-self: center;
    }
    .box5 .item:nth-child(3){
        align-self: flex-end;
    }

    .box6{
        display: flex;
        flex-wrap: wrap;/*换行*/
        justify-content: flex-end;
        align-content: space-between;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。项目顶边，中间留空*/
    }


    .box7{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
    .box7 .column{
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
    }

    .box8{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .box9{
        display: flex;
        flex-wrap: wrap;
    }
    .box9 .row{
        flex-basis: 100%;
        display: flex;
    }
    .box9 .row:nth-child(2){
        justify-content:center;
    }
    .box9 .row:nth-child(3){
        justify-content:space-between;
    }

    .box10{
        display: flex;
        flex-wrap: wrap;
    }
    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
    </div>
    <div class="box2">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box3">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box4">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box5">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box6">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box7">
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
    <div class="box8">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="box9">
        <div class="row">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="row">
            <span class="item"></span>
        </div>
        <div class="row">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
    <div class="box10">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>

用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
    .fx-box{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .fx1{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        /*在旧版本的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法等分*/
        width: 0%;
    }
    .ico{
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: red;
    }
    .fx-v-cen{/*垂直居中*/
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;  
    }
    .fx-v-start{/*顶部*/
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .fx-v-end{/*底部*/
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    
    .fx-vh-cen{
        /*水平*/
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        /*垂直*/
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;  
    }
    .ul-sty{
        text-align: center;
        list-style-type: none;
        background-color: red;
    }
    .ul-sty li:not(:last-of-type){
        border-right: 1px solid #333;
    }
    .box-sty{
        width: 200px;
        height: 200px;
        border: 1px solid #333;
    }
    .fx-box-vh{
        /*指定主轴的伸缩方向是纵向的*/
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        flex-direction:column;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="fx-box fx-v-cen">
            <i class="ico"></i>
            <div class="fx1">
                <p>aaaaaaaaaaaaaaa</p>
                <p>bbbbbbbbbbbbbbb</p>
                <p>ccccccccccccccc</p>
                <p>ddddddddddddddd</p>
            </div>
        </div>
        <div class="fx-box fx-v-cen">
            <i class="ico"></i>
            <div class="fx1">
                <p>aaaaaaaaaaaaaaa</p>
                <p>bbbbbbbbbbbbbbb</p>
                <p>ccccccccccccccc</p>
                <p>ddddddddddddddd</p>
            </div>
            <i class="ico"></i>
        </div>
        <ul class="ul-sty fx-box">
            <li class="fx1">aaa</li>
            <li class="fx1">bbbbbb</li>
            <li class="fx1">ccc</li>
            <li class="fx1">ddd</li>
        </ul>
        <div class="box-sty fx-box fx-vh-cen">
            <i class="ico">a</i>
        </div>
        <div class="fx-box fx-box-vh" style="height: 200px;">
            <div>title</div>
            <div class="fx1" style="background-color: pink; width:100%;"></div>
            <div>footer</div>
        </div>
    </div>
</body>
</html>

 

posted @ 2015-12-28 19:08  DuangDang  阅读(246)  评论(0)  编辑  收藏  举报