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

上一篇：UI培训之移动APP开发对比（优劣对比） 下一篇：ui培训之流式布局弹性盒模型(一)