全国咨询热线:400-618-4000

UI培训之弹性盒模型

创建时间:2016年04月18日14时25分 来源:传智播客UI培训学院


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  伸展和收缩模式

可以设置相应的基数,如果子元素的基数和大于父元素总宽则需要收缩,如果小于就按着相应的比例扩展。
<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>




本文版权归传智播客UI培训学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客UI培训学院
首发:http://www.itcast.cn/ui