一篇完整的FlexBox布局指南

一篇完整的FlexBox布局指南

转载请标注本文链接并附带以下信息： 译：Cydiacen 作者：CHRIS COYIER 原文：A Complete Guide to Flexbox 原文更新于 2016-11-19

译者的话

出于提升自身英语水平和巩固FlexBox的知识，于是打算翻译一篇比较知名的FlexBox布局的文章，当然这篇文章之前网上已有大漠的译文，此次翻译也有部分参考大漠译文的内容，于是在此贴上大漠译文的地址，以此致敬大佬。《一个完整的Flexbox指南》

为了不浪费大家时间，先说明下flexBox现在的兼容情况：

• （new）意味着已成为规范的新语法（比如：display:flex;）
• （tweener）意味着是来自2011年一种临时的非官方的语法（display:flexbox;）
• （old）意味着来自2009年的老语法（display:box;）

Chorme	Safari	Firefox	Opera	IE	Android	IOS
20- (old)	3.1+ (old)	2-21 (old)	12.1+ (new)	10 (tweener)	2.1+ (old)	3.2+ (old)
21+ (new)	6.1+ (new)	22+ (new)		11+ (new)	4.4+ (new)	7.1+ (new)

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

关于怎么样混合语法可以得到更好的浏览器支持的信息，可以跳转到《CSS-Tricks》或者《DevOpera》。

写作背景

Flexbox（弹性盒子）布局模式（目前是个W3C规范草案）旨在为布局，对齐和分布容器内的子项提供一种更加高效的方式，即使这些玩意儿的大小是未知的或者动态变化的。（正如他的名字所示——Flex，弹性的意思）

Flex布局背后的主要思想是——给指定的容器提供修改其子项的宽、高乃至顺序的能力，并且足够完美的去填充可用的空间（主要是为了适应各种各样的显示设备和屏幕大小）。

一个使用了Flex布局的容器，将会扩展其子项以至于填充起可用的空间，或者缩小他们以防止溢出容器。

有一个相当重要的一点，FlexBox布局的方向不像常规布局（块就是垂直从上到下，行就是水平从左到右），它是不可预知方向的。而那些常规的适合页面布局，但对于作用在大型或者复杂的应用程序（特别是当他涉及到方向改变、大小变化、拉伸和收缩等）就缺乏灵活性。

注意： FlexBox布局最适用于应用程序的组件和小规模布局，而网格布局更适用于大规模的布局。

基本要素

因为FlexBox是一整个模块并不是一个单独的属性，它涉及到很多东西包括它的所有设置属性。一些属性是需要被设置在容器（父级元素，称为『弹性容器』），而一些其他的属性需要被设置在子元素（称为『弹性项』）中。

如果常规布局是基于块布局与内联布局的方向流的，那么弹性布局就是基于“flex-flow流”。请看一下来自W3C规范的这张图，它解释了弹性布局的主要思想。

基本上，弹性项（flex item）会沿着主轴方向（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 - 弹性项在侧轴方向的宽度或高度就是cross size。cross size根据侧轴的方向来取决是宽度还是高度。

父级（弹性容器）属性

display

这个属性是定义在弹性容器上的；根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。

.container {
     
  display: flex; /* or inline-flex */
}

需要注意CSS的columns在flex容器里没有效果。

flex-direction

这个是建立在主轴上的，从而定义了弹性项放置在容器的方向。FlexBox是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。

.container {
     
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列。
• row-reverse：与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列。
• column：类似于row但是是顶部到底部
• column-reverse：类似于row-reverse但是是底部到顶部

flex-wrap

弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况，让他们根据你的需要进行自动换行。文档方向在这里也起作用，决定了新的一行被堆叠的方向。

.container{