在传统的方式中，我们通常会设置盒模型的 display、position、float 等属性来进行布局，对于一些特殊布局运用起来不是很方便，比如垂直居中水平居中，如果运用了浮动特性的话，就需要清除浮动，不但比较麻烦，一不小心还会出现意料之外的布局，最后呈现的结果往往不尽人意。

Flexbox（全称 Flexible Box）布局，也叫 Flex 布局，意为“弹性布局”，顾名思义，Flex 布局中的元素具有可伸缩性，是的，通过设置父元素的 display 属性为 display: flex | inline-flex; 其子元素便有了伸缩性，即使在子元素的宽高不确定的情况下，也能通过设置相关 css 属性来决定子元素的对齐方式、所占比例和空间分布。

一些概念

在开始学习Flex 布局前，我们先来熟悉下有关 Flex 布局的几个概念，这些概念可以帮助对后文的理解。

（基本概念预览，图来源于网络）

上图便是一个 Flex 布局的大致架构了，图中的囊括概念有几点：

Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目；Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的；主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end；子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。

在上面的相关概念中，比较重要的是主轴、交叉轴，和它们的开始位置、结束位置。子元素在父元素中会沿着主轴从 main start 到 main end 排列，沿着交叉轴从 cross start 到 cross end 排列。在常规的布局中，浏览器是从左到右排列，挤不下了就换行，在这种情况下，主轴是水平方向，交叉轴是垂直方向，主轴是从左到右，交叉轴是从上到下。

在 Flex 布局中，默认的主轴方向也是水平的，交叉轴是垂直的，通过改变 flex-direction 和 flex-wrap 的属性值可以分别改变两个轴的方向和它们的开始位置、起始位置，这就让布局更加灵活多变了。

了解完 Flex 布局相关的抽象概念，接下来我们来看看有关 Flex 布局的属性部分，这里分为两部分介绍，一是作用于父元素（容器）的，二是作用于子元素（项目）的。

容器属性

display 属性用来将父元素定义为 Flex 布局的容器，设置 display 值为 display: flex; 容器对外表现为块级元素；display: inline-flex; 容器对外表现为行内元素，对内两者表现是一样的。

<div class="container"></div>.container { display: flex | inline-flex;}

上面的代码就定义了一个 Flex 布局的容器，我们有以下六个属性可以设置的容器上：

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

flex-direction

flex-direction 定义了主轴的方向，即项目的排列方向。

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div></div>.container { flex-direction: row | row-reverse | column | column-reverse;}

row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；row-reverse：主轴在水平方向，起点在右侧；column：主轴在垂直方向，起点在上沿；column-reverse: 主轴在垂直方向，起点在下沿。

（flex-direction 为 row）

（flex-direction 为 row-reverse）

（flex-direction 为 column）

（flex-direction 为 column-reverse）

flex-wrap

默认情况下，项目是排成一行显示的，flex-wrap 用来定义当一行放不下时，项目如何换行。

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

假设此时主轴是从左到右的水平方向：

nowrap（默认）：不换行；wrap：换行，第一行在上面；wrap-reverse：换行，第一行在下面。

（默认情况，flex-wrap 为 nowrap，不换行，即使设置了项目的宽度，项目也会根据屏幕的大小被压缩）

（flex-wrap 为 wrap）

（flex-wrap 为 wrap-reverse）

将 flex-wrap 设置为 wrap-reverse 可以看做是调换了交叉轴的开始位置（cross start）和结束位置（cross end）。

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。

.container { flex-flow: <flex-direction> || <flex-wrap>;}

justify-content

justify-content 定义了项目在主轴上的对齐方式。

.container { justify-content: flex-start | flex-end | center | space-between | space-around;}

flex-start（默认）：与主轴的起点对齐；flex-end：与主轴的终点对齐；center：项目居中；space-between：两端对齐，项目之间的距离都相等；space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。

假设此时主轴是从左到右的水平方向，下面给出了不同属性值的效果图。

（justify-content 为 flex-start）

（justify-content 为 flex-end）

（justify-content 为 center）

（justify-content 为 space-between）

（justify-content 为 space-around）

align-items

align-items 定义了项目在交叉轴上如何对齐。

.container { align-items: flex-start | flex-end | center | baseline | stretch;}

flex-start：与交叉轴的起点对齐；flex-end：与交叉轴的终点对齐；center：居中对齐；baseline：项目第一行文字的基线对齐；stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。

假设交叉轴是从上到下的垂直方向，下面给出了不同属性值的效果图。

（align-items 为 flex-start）

（align-items 为 flex-end）

（align-items 为 center）

（align-items 为 baseline）

（align-items 为 stretch）

align-content

align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起作用。

.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

flex-start：与交叉轴的起点对齐；flex-end： 与交叉轴的终点对齐；center：居中对齐；space-between：与交叉轴两端对齐，轴线之间的距离相等；space-around：每根轴线两侧的间隔都相等，所以轴线与轴线之间的间隔是轴线与边框之间间隔的两倍；stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。

（align-content 为 flex-start）

（align-contet 为 flex-end）

（align-content 为 center）

（align-content 为 space-between）

（align-content 为 space-around）

（align-content 为 stretch）

项目属性

对项目设置属性，可以更灵活地控制 Flex 布局。以下六种属性可以设置在项目上：

orderflex-growflex-shrinkflex-basisflexalign-self

order

order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。

.item { order: <integer>;}

（给第三个项目设置了 order: -1; 后，该项目排到了最前面）

flex-grow

flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。

如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。

.item { flex-grow: <number>; }

（所有项目的 flex-grow 都为 1，平分剩余空间）

（flex-grow 属性值越大，所占剩余空间越大）

flex-shrink

flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。

如果所有项目的 flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。

负值对该属性无效。

.item { flex-shrink: <number>；}

（空间不足时，默认等比缩小）

（flex-shrink 为 0 的不缩小）

flex-basis

flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。

flex-basis 的设置跟 width 或 height 一样，可以是像素，也可以是百分比。设置了 flex-basis 之后，它的优先级比 width 或 height 高。

.item { flex-basis: <length> | auto;}

（不同的 flex-basis 值效果展示）

flex

flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 0 1 auto，后两个属性可选。

该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的时候可以拉伸也可以收缩，none 表示既不能拉伸也不能收缩。

.item { flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

align-self

align-self 用来定义单个项目与其他项目不一样的对齐方式，可以覆盖 align-items 属性。默认属性值是 auto，即继承父元素的 align-items 属性值。当没有父元素时，它的表现等同于 stretch。

align-self 的六个可能属性值，除了 auto 之外，其他的表现和 align-items 一样。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

（第三个项目的对齐方式与其他不同）

简单实例

三栏布局

还记得三栏布局:圣杯布局的实现么?如果使用 Flex 布局该如何实现呢？我们用上面的知识来尝试一下。首先给出基本代码：

<div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div></div>.center { height: 150px; background-color: #94E8FF;}.left { width: 100px; height: 150px; background-color: #FFB5BF;}.right { width: 200px; height: 150px; background-color: #8990D5;}

我们首先将容器设置为 Flex 布局：

.container { display: flex;}

接下来要解决的问题有，如何将 .left 排列在最左边，和如何将 .center 占满剩余空间。在项目属性的学习中，order 属性可以改变项目的排列顺序，flex-grow 可以定义项目的放大比例。没错，利用这两个属性便能解决我们的问题。

.left { order: -1;}.center { flex-grow: 1; /* flex: 1; 也行 */}

是不是很简单，Flex 布局相对于传统布局更灵活好用，上面只是给出了一个方法，更多的方法期待大家去探索。

居中问题

当子元素的高度不确定时，处理垂直居中就比较麻烦，但是使用 Flex 布局中容器有关对齐方式的属性便能快速解决，以下代码子元素在父元素中是水平、垂直居中的。

.container { display: flex; justify-content: center; align-items: center;}

浏览器兼容性及其他

设置为 Flex 布局后，子元素的 float、clear、vertical-align 属性都将失效。

因为历史原因，W3C 对 flex 做了多次更新，也就导致了各浏览器支持度参差不齐。到目前为止，Flex 布局有一下几种写法：

display: box; /* 2009 version 老语法 */display: flexbox; /* 2011 version 过渡语法 */ display: flex | inline-flex; /* 2012 version 新语法 */

从 Can I Use 上可以看出目前 Flex 布局对浏览器的支持情况。从中我们可以总结出新语法目前的支持情况：

Chrome 29+Firefox 28+Safari 9+iOS Safari 9+Android 4.4+IE Mobile 11+

更低的版本需要加上前缀进行支持，不同版本所在时期不同也会导致属性值不同，这里有一个推荐的兼容性写法：

.page-wrap { display: -webkit-box; /* 老语法 iOS 6-, Safari 3.1-6 */ display: -moz-box; /* 老语法 Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* 过渡语法 IE 10 */ display: -webkit-flex; /* 新语法 Chrome */ display: flex; /* 新语法, Spec - Opera 12.1, Firefox 20+ */ }

小结

本节主要介绍了 Flex 布局的语法，Flex 布局是当下流行的布局方式，相对于传统的布局来说，Flex 布局更灵活，易懂，能解决很多复杂场景。但是它也有缺点，由于历史原因，W3C 对该属性值做了多次修订，导致了多种写法，再加上是后起之秀，所以浏览器的兼容性没有传统布局的好。

欢迎关注