首頁電商視覺設計技術文章正文

UI培訓之彈性盒模型

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

1.1 彈性盒模型概念

CSS3中新增的一種布局盒模式，可以讓子元素按著比例來平分父元素寬度

margin:0;

padding:0;

}

div{

width: 400px;

display: flex;

margin:100px auto 0;

border:1px solid #ccc;

}

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>

</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://xamj520.com/ui

上一篇：UI培訓之清除浮動 下一篇：UI培訓之GB2312和UTF-8的區(qū)別（一）