UI培訓之彈性盒模型概念

更新時間:2016年04月25日16時26分來源:傳智播客UI培訓學院瀏覽次數(shù):

1.1彈性盒模型概念

CSS3中新增的一種布局盒模式，可以讓子元素按著比例來平分父元素寬度
<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 400px;
            display: flex;
            margin:100px auto 0;
            border:1px solid #ccc;
        }
        p{
            height: 40px;
            width: 200px;
        }
        p:nth-child(1){
            background: lightblue;
        }
        p:nth-child(2){
            background: orange;
        }
        p:nth-child(3){
            background: seagreen;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

1.2伸展和收縮模式

可以設置相應的基數(shù)，如果子元素的基數(shù)和大于父元素總寬則需要收縮，如果小于就按著相應的比例擴展。
<html>
<head>
    <meta charset="UTF-8">
    <title>伸縮盒模型</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            display: flex;
            width: 400px;
            margin:100px auto 0;
            border:1px solid #ccc;
        }
        p{
            width: 100px;
            height: 40px;
        }
        p:nth-child(1){
            background: lightblue;
        }
        p:nth-child(2){
            flex-grow: 1;
            background: orange;
        }
        p:nth-child(3){
            flex-grow: 4;
            background: seagreen;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

1.3彈性盒子子元素顯示方向

可以通過新增的屬性來控制子元素的顯示方向和是否多行顯示，以及對其方式。
<head>
    <meta charset="UTF-8">
    <title>flex子元素顯示方向</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 400px;
            display: flex;
            padding:10px;
            margin:100px auto 0;
            border:1px solid #CCCCCC;

            flex-direction: column-reverse;
        }
        p{
            flex: 1;
            height: 100px;
        }
        p:nth-child(1){ background: lightblue; }
        p:nth-child(2){ background: orange; }
        p:nth-child(3){ background: seagreen; }

        /*
            flex-direction: 設置 flex父容器下子元素的顯示方向。
            row: 表示正向排序
            row-reverse: 反向排序
            column: 橫向排列
            column-reverse:橫向反序排列
        */
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

本文版權(quán)歸傳智播客UI培訓學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://oisangadgets.com/ui

上一篇：UI培訓之移動APP開發(fā)對比（優(yōu)劣對比） 下一篇：ui培訓之流式布局彈性盒模型(一)