使用 flexbox 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 <div> 元素、绝对定位 和一些JavaScript hacks, 使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：
- 你想要将一个元素放在页面的中间
- 你想要一组在垂直方向可以一个紧挨一个的布局容器
- 你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠
这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 flexbox 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 the more general guide to using CSS flexible boxes.
EDIT
如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 <div> 元素中，通过设置 display 属性为 flex 来使用flexbox，然后设置它任意一行的 flex-flow 属性, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。
接下来，只要你想让某个元素使用弹性布局，就为它添加 flex 属性。一般情况下，你将会使用下列三个值之一：
- 如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置
flex: none，none 将会被解释为0 0 auto. - 如果想要一个固定大小的元素，则设置
flex: 0 0 size。如：flex 0 0 60px。 - 如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置
flex: auto，它代表1 1 auto.
有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。
EDIT
在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>test</title> 5 <style> 6 .vertical-box { 7 display: flex; 8 height: 400px; 9 width: 400px; 10 flex-flow: column; 11 } 12 .horizontal-box { 13 display: flex; 14 flex-flow: row; 15 } 16 .spacer { 17 /*元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 flex: auto，它代表 1 1 auto.*/ 18 flex: auto; 19 background-color: blue; 20 } 21 .centered-element { 22 /*如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 flex: none，none 将会被解释为 0 0 auto.*/ 23 flex: none; 24 background-color: white; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="vertical-box"> 30 <div class="spacer"></div> 31 <div class="centered-element horizontal-box"> 32 <div class="spacer"></div> 33 <div class="centered-element">Centered content</div> 34 <div class="spacer"></div> 35 </div> 36 <div class="spacer"></div> 37 </div> 38 </body> 39 </html>