介绍

CSS 2.1 已经定义了四种布局模式：

block 布局，是为了布局文档设计的（design for laying out document）
inline 布局， 是为了布局文本设计的
table 布局，以为了以表格的形式展示 2D 数据设计的
positioned 布局，是为了显示在文档中完成元素的定位而设计的，这种布局不用顾忌其他元素在文档中的位置。

这个W3C的文档介绍了一种新的布局模式，flex layout, 这种布局模式是为了更加复杂的web应用和网页设计的。

概览

Flex layout 从表面上看很像 block layout。但是它缺少许多在 block layout 中用于文本和文档为中心的属性，比如 float and columns. 相反的它拥有许多的简单而且强大的工具用于分配空间和对其元素，这些能力往往是 web 应用和复杂网页需要的。flex 容器的内容：

可以从任意的流方向(flow direction)上被布局(左，右，上，下)
可以以相反的顺序来展示或者被重排(比如视觉上的顺序可能独立于源码的顺序，或者语言上的顺序（speech order）)
可以在主轴上被线性的排列也可以次轴(sencondary axis)被打包成多行
可以根据当前可用的空间来伸缩大小
can be aligned with respect to their container or each other on the sencondary
可以动态的在主轴上收缩或者展开 while preserving the container’s cross size

例子1

这里有一个商品展示的例子，每个商品都有标题，图片，描述和一个购买按钮。设计师的希望每一个商品展示区域都有统一的大小，商品的图片在文字上面，而购买按钮始终和靠在底部，不管这个商品的描述有多长。Flex layout 很容易实现这种设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#detals {
	display: flex;
	flex-flow: row wrap;
}

.sale-item {
	display: flex;
	flex-flow: column;
}

.sale-item > img {
	order: -1;
	align-self: center;
}

.sale-item > button {
	margin-top: auto
}


<section id="deals">
  <section class="sale-item">
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don’t have much money.
    <ul>
      <li>Computer
      <li>Monitor
      <li>Keyboard
      <li>Mouse
    </ul>
    <img src="images/computer.jpg"
         alt="You get: a white computer with matching peripherals.">
    <button>BUY NOW</button>
  </section>
  <section class="sale-item">
    …
  </section>
  …
</section>

Module interactions

这个文档扩展了 ‘display’ 的属性，添加了一个新的块级和内联级的 display 的属性，