Flex布局

下面的代码是在学习 Flex 布局时写的。
主要是参考了阮一峰博客这篇文章里的内容。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flex Layout Study</title>

    <style>
    
    * {
        box-sizing: border-box;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .box {
        display: flex;
        width: 11em;
        height: 11em;
        background-color: #f5f7f9;
        padding: 1em;
        margin-top: 1em;
    }
    
    .boxL {
        display: flex;
        width: 11em;
        height: 13em;
        background-color: #f5f7f9;
        padding: 1em;
        margin-top: 1em;
    }

    .item {
        font-size: 3em;
    }

/**
*    Part 1 single 
*/

    /* left top */
    .box.box1 {
        
    }
    
    /*left center */
    .box.box2 {
        justify-content: center;
    }

    /* right top*/
    .box.box3 {
        justify-content: flex-end;
    }
    
    /* left center */
    .box.box4 {
        align-items: center;
    }
    
    /* left bottom */
    .box.box5 {
        align-items: flex-end;
    }
    
    /* center center */
    .box.box6 {
        justify-content: center;
        align-items: center;
    }
    
    /* right top */
    .box.box7 {
        justify-content: flex-end;
    }

    /* right center */
    .box.box8 {
        justify-content: flex-end;
        align-items: center;
    }

    /* right bottom */
    .box.box9 {
        justify-content: flex-end;
        align-items: flex-end;
    }

/**
*    Part 2 double 
*/    
    
    .box.box10 {
        justify-content: space-between;
    }

    /* flex-direction: column; 主轴为垂直方向，起点在上沿 */
    .box.box11 {
         flex-direction: column;
         justify-content: space-between;
    }

    .box.box12 {
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
    }
    
    /* align-items: flex-end; 与交叉轴的终点对齐*/
    .box.box13 {
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-end;
    }

    .box14 > .item:nth-child(2){
         align-self: center;
    }
    
    .box.box15 {
         justify-content: space-between;
    }
    .box.box15 > .item:nth-child(2){
         align-self: flex-end;
    }

/**
*    Part 3 three 
*/    

    .box.box16 > .item:nth-child(2){
         align-self: center;
    }
    .box.box16 > .item:nth-child(3){
         align-self: flex-end;
    }

/**
*    Part 4 four  
*/    

    /* align-content: space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布*/
    .box.box17 {
         flex-wrap: wrap;
         justify-content: flex-end;
         align-content: space-between;
    }

    .box.box18 {
         flex-wrap: wrap;
         align-content: space-between;
    }
    .cloumn {
        flex-basis: 100%; /* 让 cloumn 充满 box18 整行 */
        display: flex;
        justify-content: space-between;
    }

/**
*    Part 5 six  
*/    
    .box.box19 {
         flex-wrap: wrap;
         align-content: space-between;
    }

    /* div 使用 boxL 类名，高度增大为 13em，因为汉字“圆”的高度比宽度长 */
    .boxL.box20 {
         flex-direction: column;
          flex-wrap: wrap;
          align-content: space-between;
    }

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

    .boxL.box22 {
        flex-wrap: wrap;
    }

    </style>

</head>
<body>

<h2>九项目</h2>

<div class="container">

    <div class="boxL box22">
        <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>

</div>

<hr>

<h2>六项目</h2>

<div class="container">

    <div class="box box19">
        <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="boxL box20">
        <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="boxL box21">
        <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>

<hr>

<h2>四项目</h2>

<div class="container">

    <div class="box box17">
        <span class="item">圆</span>
        <span class="item">圆</span>
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box18">
        <div class="cloumn">
            <span class="item">圆</span>
            <span class="item">圆</span>
        </div>
        <div class="cloumn">
            <span class="item">圆</span>
            <span class="item">圆</span>
        </div>
    </div>

</div>

<hr>

<h2>三项目</h2>

<div class="container">

    <div class="box box16">
        <span class="item">圆</span>
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

</div>

<hr>

<h2>双项目</h2>

<div class="container">
    
    <div class="box box10">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box11">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box12">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box13">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box14">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>

    <div class="box box15">
        <span class="item">圆</span>
        <span class="item">圆</span>
    </div>
</div>    

<hr>

<h2>单项目</h2>

<div class="container">

    <div class="box box1">
        <span class="item">圆</span>
    </div>
    
    <div class="box box2">
        <span class="item">圆</span>
    </div>

    <div class="box box3">
        <span class="item">圆</span>
    </div>

    <div class="box box4">
        <span class="item">圆</span>
    </div>

    <div class="box box5">
        <span class="item">圆</span>
    </div>

    <div class="box box6">
        <span class="item">圆</span>
    </div>

    <div class="box box7">
        <span class="item">圆</span>
    </div>

    <div class="box box8">
        <span class="item">圆</span>
    </div>

    <div class="box box9">
        <span class="item">圆</span>
    </div>

</div>



</body>
</html>
posted @ 2016-08-09 16:25 Hi！张宝阅读(175) 评论(0) 收藏举报
刷新页面返回顶部
Flex布局

公告
