Flexbox的布局是一个用于页面布局的全新CSS3模块功能,它可以把列表放在同一个方向（从左到右;flex-flow: row;或从上到下排列flex-flow: column;），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器（flex container）来辅助实现。

Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调整整个布局。它的目的是实现常见的布局模式，比如说三列布局，可以非常简单的实现。

伸缩容器（flex containers）和伸缩项目（flex items）

伸缩容器的设置为display:flex;

伸缩容器中的所有子元素都是伸缩项目；

伸缩方向和换行

伸缩容器中的flex-flow来决定伸缩的布局方式，值为row，伸缩项目由左向右排列，值为column，项目由上向下排列。

一个伸缩容器中的所有伸缩项目既可以排列在单行也可以多行排列。这个主要由“flex-flow”是否设置为“wrap”来决定。如果伸缩容器设了“wrap”属性值，当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

如果伸缩容器把“flex-flow”设置为“row”后，伸缩项目将需要设置他们的宽度。伸缩项目的高度将会自动设置为伸缩容器的高度。

有关于flex-direction详细

flex-direction属性可以用来设定伸缩容器的主轴的方向，这也决定了用户代理配置伸缩项目的方向。主要适用于伸缩容器，主要包括以下几个值：

row:flex-direction的默认值，表示伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要主向）。主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。

row-reverse：表示的是除了主轴起点与主轴终点方向交换以外同row属性值的作用。

column：表示的是伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）同向。主轴起点与主轴终点方向分别等同于当前书写模式的前与后方向。简单的可以理解为列布局。

column-reverse：表示的是除了主轴起点与主轴终点方向交换以外同“column”的属性值作用。

关于flex-wrap详细

flex-wrap属性主要用来控制伸缩容器是单行还是多行，也决定了侧轴方向一新的一行的堆放方向。主要适用于伸缩容器，主要包括以下几个值：

nowrap:flex-wrap的默认值，表示的是伸缩容器为单行。侧轴起点方向等同于当前书写模式的起点或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。

wrap：表示的是伸缩容器为多行。侧轴起点方向等同于当前书写模式的起眯或前/头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。

wrap-reverse：除了侧轴起点与侧轴终点方向交换以外同wrap所起作用相同。

justify-content参数详解

flex-start：伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。

flex-end：伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。

center：伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行的在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。

space-between：伸缩项目会平均地分布在一行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于「flex-start」。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。

改变元素布局的顺序

传统上不改变元素的结构要改变元素的布局顺序一直是一个痛苦的事情。不过在Flexbox中，你可以通过“order”属性来修改伸缩项目的布局顺序（在不调整结构前提之下）。这个属性一直接受的整数值——称为系数集——也称为排序组，会出现在伸缩项目中。默认情况之下，所有的伸缩项目的顺序组都是“0”。我们可以很容易的给每个伸缩项目设置不同的顺序值。更高的值会排在后面，而原来的HTML结构并不会有任何变化。并且order可以取负值。

简单例子

这是一个很简单的实例，Flexbox创建了一个经典的三列布局。主内容宽度为60%，而边栏是使用“flex”属性，按比例自动根据伸缩容器剩余空间计算得到对应的宽度,右边始终是左边的2倍宽度。

html

<div class="container>

       <nav class="left"></nav>

       <div class="main"></div>

     <div class="right"></div>

</div>

CSS

.container {

display: flex;

flex-flow: row;

}

.main {

width: 60%;

}

.left {

flex: 1;

}

.right {

flex: 2;

}