Flexbox 布局是一维布局方式，也就是说它会按照 row（行）或者 column（列）对容器中的子元素进行布局。移动端也存在这种布局方式，比如：Android 中的 FlexboxLayout，iOS 中的 yoga（https://github.com/facebook/yoga/tree/master/YogaKit）。几乎所有的平台都会支持这种布局方式，说明它一定有自己的布局优势。
Flexbox 布局是通过 CSS 中的属性 display：flex 来控制的，布局时需要指定一个容器 flex container，然后把要布局的元素放到容器中，这些元素被称为 flex item。我们看一下 MDN 上的一张图：
Flexbox 会把整个布局按两根轴（主轴（main axis），与主轴交叉的轴（cross axis））来布局。最外层为容器，容器内部为 item。整个布局思路就是按照不同的轴对 item 进行布局。
比如我们想实现下面这种效果：
想实现上面这种布局方式，可以嵌套 2 个 flex 容器：
总之，Flexbox 其实是一种通过一个容器来控制它内容元素的布局方式，容器具有一些属性来控制它内部的元素该如何布局，内部元素也有一些属性来控制元素本身的布局方式。我们一起看看这些属性：
作用于「容器」上的属性
flex-direction: 布局方向，决定子元素要按照什么方向进行布局，也就是「主轴」的方向，主轴的方向不等于 x 轴，这一点需要初学者注意；
.container { display: flex; flex-direction: row; #row 主轴就是 X 轴的方向（默认） #row-reverse 主轴的相反方向 #column 主轴方向为 Y 轴 #column-reverse 主轴的相反方向 }
flex-wrap: 定义子元素「超出」容器后该如何布局;
.container { display: flex; flex-direction: row; flex-wrap: no-wrap | wrap | wrap-reverse; }
flex-flow: 为 flex-direction | flex-wrap 的复合，比如：
flex-flow: row wrap;
justify-content: 「主轴」的对齐方式；
.container { display: flex; flex-direction: row; flex-wrap: wrap; /* 主轴的对齐方式*/ justify-content:flex-start | flex-end | center | space-between | space-around; }
align-items: 定义交叉轴的对齐方式;
.container { display: flex; flex-direction: row; /* 交叉轴的方向 */ align-items: center | flex-start | flex-end | stretch | baseline; }
align-content: 如果存在多行，将对多行进行对齐，如果只有一行将不起作用，它会影响 align-items 的对齐方式；
.container { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start | flex-end | center | stretch | space-around | space-between; }
flex-item 的属性
flex-item 也有自己的属性，通过这些属性可以单独控制自己该如何布局。
order : 控制显示顺序，默认值为 0，可以设置负数和整数。设置第 3 个孩子的 order 为 -1，其它的孩子都为 0，所以第三个孩子将排到第一个。
span:nth-child(3) { background-color: #FFC988; order: -1; }
flex-grow : 表示当容器存在「剩余空间」时，该如何分配剩余空间，默认值为 0，也就是说不会分配剩余空间。它的值为整数，是分配的比例。把第 3 个元素的 flex-grow 设置成 1，由于其它元素均为 0，那么剩余空间都将会全部分配给第三元素。
span:nth-child(3) { background-color: #FFC988; flex-grow: 1; order: -1; }
flex-shrink : 当容器空间不足时该如何缩小子元素，默认值为 1。如果设置为 0，即使容器空间不足，也不会缩小；
flex-basic ：它表示占用的最小空间，计算剩余空间会利用这个值来计算。
span:nth-child(3) { background-color: #FFC988; flex-grow: 1; flex-shrink: 0; flex-basis: 150px; order: -1; }
flex ：为 flex-grow, flex-shrink, flex-basic 的混合值，默认为 0 1 auto；
align-self : 对齐方式，它默认继承自父元素的 align-items 值，可通过这个属性来修改这个值。设置第三个元素对齐方式为居中对齐。
span:nth-child(3) { background-color: #FFC988; flex-grow: 1; flex-basis: 150px; align-self: center; }
至此，flexbox 布局就介绍完了，我认为整个布局思路就是围绕轴、容器和子元素进行的，通过设置容器的属性来控制整个容器内部子元素该如何布局，子元素可以单独通过自己的属性来控制自己该如何布局。
周末写了下网站首页，使用 flexbox 进行布局，效果如下：
大家加油！！！
参考：
https://www.w3.org/TR/css-flexbox/ (opens new window)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (opens new window)
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox (opens new window)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
https://zellwk.com/blog/simple-form-with-flexbox/ (opens new window)
推荐阅读：
第 3 天 - Web UI 布局方式（二）Position (opens new window)