flexbox可以让我们很容易的实现一些以前很难实现或者无法实现的布局，比如块元素垂直居中，等高的多列布局等。废话不多说flexbox的使用方式很简单，以一个多列布局为例
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Third article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
</section>
这个页面包含一个section，以及他里面的三个article元素，每个article元素内有一个标题和一个段落。现在我们想将三个article元素设置为等高的三列，只需要在他们的父元素section上设置display属性为flex；
点击这个在线示例就可以看到代码的效果了，很简单对吧。它还有一些其他的属性可以设置，比如设置display：inline-flex可以对行内元素进行多列布局，还有一个flex-direction属性可以设置布局的方向，默认值为row，即列布局，还可以设置为column，即行布局，另外还有两个值，row-reverse和column-reverse分别设置方向反转。
另外如果父元素使用了定宽或/和定高的话，可能会出现flex子元素溢出的情况，可以使用flex-wrap：wrap来改善这一情况。
对于flex-direction和flex-wrap有一个缩写，就像这样：flex-flow：row wrap；
接下来一个比较重要的内容是flex子项(flex-item)的占用空间的比例，当给以上的html代码增加一条css规则：
article{
flex:1
}时，三个article将会占用相等的空间，即都是一份，1比1比1；也就是说设置在这段代码中，设置flex：1和flex：4000没有任何区别。当你设置如下代码时：
article：nth-of-type{
flex：2;
}中间的article占用的空间将是，两边的两个的二倍。还可以设置最小宽度，flex：1 200px；这意味着机器会先为三个布局都分配200px；然后再尽量对他们的比例属性进行应用。
flex属性其实是flex-grow(即flex盒子比例)，flex-shrink（和溢出有关，后面的文章讨论），flex-basis（即最小值）的缩写，这三个属性都可以单独写。
flexbox还有两个属性align-items和justify-content，前者控制flex-item在交叉轴上的对齐方式，默认为stretch，这也是为什么flexbox产生的布局默认是等列的或等长的，stretch将他们拉伸到最长的元素的长度以填充宽度/高度。其他的值还有center，flex-end，flex-start。justify-content将控制flex-item在主轴上的对齐方式。主轴即flex-item元素方向上的轴。
flexbox还用一个属性用于flex-item的排序，这个属性是order，所有flex-item的默认order值为0，order值越大的越靠后。相同的按照html代码中的源顺序来显示。可以将一个元素的order值设置为负值来让他显示在所有元素之前。
flex嵌套，设置一个元素为flex元素（即父元素设置了display：flex属性），则它自身也自动成为一个flex容器。
最后flexbox特性兼容ie11及以上，以及其他主流浏览器和较新的android/ios浏览器，flexbox对于旧的浏览器若出现不兼容的情况将直接使布局混乱，所以如果要支持旧的浏览器，务必要进行仔细测试。