流布局存在的问题

之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性：

box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例，仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例

几种布局方法

三列自适应布局，且有固定margin：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
.wrap { display: -webkit-box; -webkit-box-orient: horizontal; }
.child { min-height: 200px; border: 2px solid #666; -webkit-box-flex: 1; margin: 10px; font-size: 100px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; }
</style>
<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
</body>
</html>

image

当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
.wrap { display: -webkit-box; -webkit-box-orient: horizontal; }
.child { min-height: 200px; border: 2px solid #666; margin: 10px; font-size: 40px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; }
.w200 { width: 200px }
.flex1 { -webkit-box-flex: 1 }
.flex2 { -webkit-box-flex: 2 }
</style>
<div class="wrap">
    <div class="w200 child">200px</div>
    <div class="flex1 child">比例1</div>
    <div class="flex2 child">比例2</div>
</div>
</body>
</html>

image

下面是一个常见的web page 的基本布局：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
header, footer, section { border: 10px solid #333; font-family: Georgia; font-size: 40px; text-align: center; margin: 10px; }
#doc { width: 80%; min-width: 600px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; margin: 0 auto; }
header, footer { min-height: 100px; -webkit-box-flex: 1; }
#content { min-height: 400px; display: -webkit-box; -webkit-box-orient: horizontal; }
.w200 { width: 200px }
.flex1 { -webkit-box-flex: 1 }
.flex2 { -webkit-box-flex: 2 }
.flex3 { -webkit-box-flex: 3 }
</style>
<div id="doc">
    <header>Header</header>
    <div id="content">
        <section class="w200">定宽200</section>
        <section class="flex1">比例3</section>
        <section class="flex2">比例1</section>
    </div>
    <footer>Footer</footer>
</div>
</body>
</html>

image