码迷,mamicode.com
首页 > 其他好文 > 详细

Flex布局

时间:2015-12-28 20:17:15      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

虽然接触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>

 

Flex布局

标签:

原文地址:http://www.cnblogs.com/jiujiaoyangkang/p/5083532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!