全国咨询/投诉热线:400-618-4000

UI培训之弹性盒模型概念

更新时间:2016年04月25日16时26分 来源:传智播客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 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额