Flexbox布局（Flexible Box）模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。

W3C兴趣小组，翻译了一份中文，感兴趣的可以点击这里。

Flex布局背后的主要思想是给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

最重要的是Flexbox布局的direction-agnostic与常规则布局（块的vertically-based和内联horizontally-based）不同。而那些好的页面缺乏灵活性，特别是方向的改变，大小的调整，伸展，收缩等等。

注：Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。

有关于Grid布局模块的中文资料可以点击这里查阅。

基础知识和专业术语

因为Flexbox是一个模块，而不是一个单一的属性，他涉及很多东西。其中有一些是容器上的属性（父元素，也被称为“flex容器”），而有一些是容器子元素上的属性（常称为“flex项目”）。

如果常规布局是基于块和内联文本流方向，那么Flex布局就是基于“Flex-flow”方向。请看看下面来自规范中的一张图，其解释了Flex布局的主要思想。

基本上，Flex项目是沿着main axis(从main-start向main-end)或者cross axis(从cross-start向cross-end)排列。

• main axis:Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。
• main-start | main-end:Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
• main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
• cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
• cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

Flex容器属性

display

定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。

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

Flex容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

如果元素display的值指定为inline-flex，而且元素是一个浮动元素或绝对定位元素，则display的计算值是flex。

开启Flex容器：让一个元素变成伸缩容器

flex-direction

这是用来创建方轴，从而定义Flex项目在Flex容器中放置的方向。Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列，要么是垂直列排列。

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

• row(默认值):如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列
• row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列
• column:和row类似，只不过方向是从上到下排列
• column-reverse:和row-reverse类似，只不过方向是从下向上排列

伸缩流：指定伸缩容器主轴的伸缩流方向

flex-wrap

默认情况之下，Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。方向在这也扮演了一个重要角度，决定新的一行堆放方向。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(默认值):单行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列
• wrap:多行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列
• wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右向左排列，反之rtl，从左向右排列

换行：指定伸缩项目是否沿着侧轴排列