☀【布局】多栏布局 / 盒布局

深入了解 Flexbox 伸缩盒模型
http://c7sky.com/dive-into-flexbox.html
弹性方框模型 (Flexible Box Model) 快速入门
http://www.html5rocks.com/zh/tutorials/flexbox/quick/

 

多栏布局

☀【布局】多栏布局 / 盒布局_第1张图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 600px;

            -moz-column-count: 3;
            -moz-column-gap: 28px;
            -moz-column-rule: 2px dotted #CCC;
            -webkit-column-count: 3;
            -webkit-column-gap: 28px;
            -webkit-column-rule: 2px dotted #CCC;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
        <div>咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
    </div>
</body>
</html>

☀【布局】多栏布局 / 盒布局_第2张图片

 

盒布局

☀【布局】多栏布局 / 盒布局_第3张图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            display: -moz-box;
            display: -webkit-box;
        }
        .box .item {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .box .item1 {
            -moz-box-flex: 2; /* 弹性盒布局 */
            -webkit-box-flex: 2;
            -moz-box-ordinal-group: 3; /* 显示顺序 */
            -webkit-box-ordinal-group: 3;
        }
        .box .item2 {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
        }
        .box .item3 {
            width: 200px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
        <div class="item item2">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
        <div class="item item3">咳咳咳,曲颈向天歌,浓痰浮白水,久病化沉疴。一咳咳落日共月,再咳咳逆江与河。咳遍楚营霸王乱,虞兮虞兮奈若何;咳得后主辞庙去,无心垂泪对宫娥。汉皇重咳思倾国,御宇多年求不得。子美夜问有封事,哪堪因风想玉咳。人生百年终有死,咳咳咳咳咳咳咳</div>
    </div>
</body>
</html>

指定水平方向与垂直方向的对齐方式

☀【布局】多栏布局 / 盒布局_第4张图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background: #DDD;
            display: -moz-box;
            display: -webkit-box;
            -moz-box-align: center;
            -webkit-box-align: center;
            -moz-box-pack: center;
            -webkit-box-pack: center;
        }
        .box div {
            width: 100px;
            height: 100px;
            background: #F00;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>

 

盒布局与多栏布局的区别在于:使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定一个统一的宽度,栏与栏之间的宽度不可能是不一样的。另外,使用多栏布局时,也不可能具体指定什么栏中显示什么内容,因此比较适合在显示文章内容的时候,不适合用于安排整个网页中由各元素组成的网页结构时

你可能感兴趣的:(布局)