[译]flexbox全揭秘

原文：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

弹性布局（弹性盒子，现今仍是w3c的候选推荐），目标在于，对于一个容器中的各个项目块之间能够有效地放置空白的区域，并且不管空白区域是不定宽的、动态的。

弹性布局背后的思想就是使得容器中的项目块能够改变宽度和高度来最佳地填充可用的空间（为了适应不同类型的设备和屏幕宽度）。一个弹性的盒子能够扩展它里面的项目块来填充空间，或者压缩它们防止溢出。

最重要的是，弹性布局与传统的布局相比是方向无关的（传统中垂直布局是块状布局、水平布局是内联布局）。传统布局能够很好的为网页工作，但是缺少弹性来支持大型和复杂的应用（特别当涉及到方向的变化、调整、拉伸和收缩等）。

注意: 弹性布局主要适用于应用中的组件，是小规模的布局。而栅格布局更适合用来做大型规模的布局。

基础知识

flexbox这一个模块而不是一个属性，它涉及到了一系列的属性。其中一些属性是设置在容器上的（父元素，被称为弹性容器），而一些属性是设置在子元素上的（被称为弹性项目块/弹性内容）。

如果说常规的布局是基于块状元素和内联元素的的流式方向，弹性布局就是基于“弹性的流式方向”。请看下面的图例，解释了弹性布局背后的主要思想。

基本上，项目块要么布局在主轴上（上图中从main start开始到main end结束）；要么布局在交叉轴上（上图中从cross start开始到cross end结束）。

main axis - 弹性容器的主轴是弹性项目块布局的主要数轴。注意，主轴不一定是水平的；它依赖于flex-direction这个属性的设置
main-start | main-end - 弹性项目块在主轴上布局，从main-start方向开始到main-end结束
main size - 弹性项目块在主轴上的宽度或者高度
cross axis - 垂直于主轴的轴线叫做交叉轴。它的方向依赖于主轴的方向
cross-start | cross-end - 弹性项目块在交叉轴上布局，从cross-start开始到cross-end 结束
cross size 弹性项目块在交叉轴上的宽度或者高度

属性

display : flex | inline-flex ; (运用在父元素弹性容器上)

这个属性定义出一个弹性容器；容器以内联或者块级方式布局取决于给定的值

请注意的是：

CSS3的Columns属性对弹性容器是没有影响的（译者注：CSS3的Columns属性可以参见这里）
float, clear 和 vertical-align 对弹性项目块没有影响

flex-direction (应用在弹性容器的父元素上)

这个属性决定了主轴的方向，因为它确定了弹性项目块在弹性容器中的方向

row (默认) : 从左到右是ltr; 从右到左是 rtl
row-reverse : 从右到左是 ltr ; 从左到右是 rtl
column : 内容按从上到下排列
column-reverse : 内容按从下到上排列

flex-flow(应用在弹性容器的父元素上)

是属性'flex-direction' 和 ‘flex-wrap’ 的缩写，能够同时定义弹性容器的主轴和交叉轴。默认的值是 ‘row nowrap’

justify-content(应用在弹性容器的父元素上)

定义了主轴方向上的布局，它的作用是分发除了弹性内容以外的空白区域

flex-start(默认)：内容从开始方向排列
flex-end: 内容从结束方向排列
center : 内容集中在中间
space-between : 内容散落分布在基准线上；第一个内容紧挨着开始线，最后一个内容紧挨着结束线
space-around : 内容散落分布在基准线上；内容之间以相同的宽度隔开

align-items(应用在弹性容器的父元素上)

这个属性定义的是弹性项目块在交叉轴方向上的排列方式。可以认为是justify-content这个属性在交叉轴方向上的应用（前者是在主轴上）

flex-start : 内容排列在交叉轴的开始基线处
flex-end : 内容排列在交叉轴的结束基线处
center : 排列在交叉轴的中部
baseline : 内容以它们的基线对齐
stretch(默认): 上下铺满整个父容器（同样也是会遵循min-width或者max-width的设置）

align-content(应用于弹性容器元素上)

当交叉轴方向上有多余的空白部分的时候，此属性定义了多行之间的排列方式，类似于justify-content在主轴上对单个内容的影响

注意：当容器内的内容只有一行的时候，此属性没有任何影响

flex-start : 多行内容排列在容器的开始基线处
flex-end : 多行内容排列在容器的结束基线处
center : 内容排列在容器的中部
space-between : 每行内容均匀分布；第一行分布在容器的开始处，最后一行分布在容器的结束处
stretch(默认) : 默认内容占满整个剩余的空间

order(应用在弹性内容上)

默认情况下，弹性项目块按原始顺序布局。不过，order这个属性可以控制项目块在容器中的顺序。

flex-grow(应用在弹性内容上)

定义了一个弹性项目块的弹性增长的情况。该属性的值是数字，用数字来作为比例。决定了弹性容器中的项目块占领的可用空间的大小。

如果所有的弹性项目块都设置flex-grow:1, 那么每个项目块在容器中都会被设置成相同的大小。如果你给其中一个项目块设置了flex-grow:2，那么这个项目块占用的空间就会是别的项目块的两倍。

注意: 负值是不允许使用的。

flex-shrink (应用在弹性的内容上)

定义了弹性内容的收缩情况；同样负值也是不允许的

flex-basis(应用在弹性内容上)

在剩余空间分配之前，定义了元素的基准伸缩值

flex (应用在弹性内容上)

这个内容是flex-grow, flex-shrink, flex-basis这三个属性是缩写形式。第二和第三个参数(flex-shrink, flex-basis)是可选的。默认值是

0 1 auto.

align-self(应用在弹性内容上)

这个属性能够覆盖默认的对齐方式或者是align-items属性定义的方式

具体的属性value值得含义可以参考align-items的解释

例子

从一个简单的例子入手，解决一个最常遇到的问题：完美的居中。用flexbox实在是再简单不过了。

这依赖于margin值设置为auto来吸收到额外的空间。所以设置一个margin为auto 的值能够使得内容完美的居中于两个轴之间。

现在来使用更多的属性。考虑有个6个项目块，每块都有一个固定的宽度，但是能够自动调整。需求就是让他们能够均匀的分布在水平轴上，并且当我们调整浏览器的时候，也是能够自适应的（不要使用媒体查询的方法）.

这样就完成了。其他的就是一些样式上的问题了。下面是一个例子。去CodePen上，改变一下你的屏幕大小，看看会发生什么。

让我们试试别的东西。想象一下我们有一个位于网站上部靠右对齐的导航，但是我们想让它能够在中等屏幕以及更小尺寸的屏幕上居中。

那么很简单。

让我们用flexbox来做一些更加高级的弹性功能！移动的3栏布局，并且拥有全屏宽的头部和底部。并且独立于原始的顺序。

其他资源

Flexbox 的规范说明（译者注：W3C官网说明）
Flexbox at MDN
Flexbox at Opera
Diving into Flexbox by Bocoup
Mixing syntaxes for best browser support on CSS-Tricks
Flexbox by Raphael Goetter(FR)
Flexplorer by Bennett Feely

浏览器支持

(modern) 指最近的语法（display:flex;）
(hybrid) 11年的语法 (display: flexbox;)
(old) 09年的老语法 (display:box)

黑莓浏览器10+ 支持新语法

有关如何搭配语法使得能够支持更多的浏览器，请参考this article (CSS-Tricks)或者this article (DevOpera).

下面是一个sass，解决浏览器的支持问题。