深入了解 Flexbox 伸缩盒模型
http://c7sky.com/dive-into-flexbox.html
弹性方框模型 (Flexible Box Model) 快速入门
http://www.html5rocks.com/zh/tutorials/flexbox/quick/
多栏布局
<!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>
盒布局
<!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>
指定水平方向与垂直方向的对齐方式
<!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>
盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时