记得第一次接触 CSS 这门语言，那时候的我们没有 Macbook，不知道 Chrome 才是最好用的，也不知道 Sublime。用着古董级的 Dreamweaver，写着 <br/> 硬生生的挤出第一个页面。那个时代的我们不知道什么是 CSS盒模型，也不知道什么弹性布局、响应式布局。CSS 伴随我们一起成长，从最初的 table 布局到现在的各种花式布局框架，一晃眼已经这么多年过去。
前言
本文的全局样式
.main {
width: 600px;
height: 300px;
background-color: #F5F2F0;
}
.item {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: PT Mono;
}
本文的全局 HTML
<div class="main">
<div id="a" class="item" style="background-color: #FBE9EB;">A</div>
<div id="b" class="item" style="background-color: #C6E48B;">B</div>
<div id="c" class="item" style="background-color: #FBE9EB;">C</div>
<div id="d" class="item" style="background-color: #C6E48B;">D</div>
<div id="e" class="item" style="background-color: #FBE9EB;">E</div>
<div id="f" class="item" style="background-color: #C6E48B;">F</div>
<div id="g" class="item" style="background-color: #FBE9EB;">G</div>
</div>
flex-direction 属性
flex-direction: row; 沿着主轴，从左到右排列，超出容器元素后不换行。
.main {
display: flex; /* 指定容器为 flex 布局 */
flex-direction: row; /* 指定容器的排列方向为从左至右(row 是默认值) */
}
row.png
flex-direction: column; 沿着主轴，从上到下排列，超出容器元素后不换行。
.main {
display: flex;
flex-direction: column; /* 指定容器的排列方向为从上至下 */
}
column.png
flex-direction: row-reverse; 沿着主轴，从右到左排列，超出容器元素后不换行。
.main {
display: flex;
flex-direction: row-reverse; /* 指定容器的排列方向为从右到左(row 是默认值) */
}
row-reverse.png
flex-direction: column-reverse; 沿着主轴，从下到上排列，超出容器元素后不换行。
.main {
display: flex;
flex-direction: column-reverse; /* 指定容器的排列方向为从下到上 */
}
column-reverse.png
flex-wrap 属性
flex-wrap 用来控制容器内的元素是否换行，它可以取三个值：nowrap wrap wrap-reverse。
nowrap 默认值，也就是不换行。
.main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
nowrap.png
wrap 自动换行
.main {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
wrap.png
wrap-reverse 自动换行，行的顺序会被反转过来。
.main {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
wrap-reverse.png
flex_flow 属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
.main {
height: 100%;
display: flex;
flex-flow: row wrap; /* 从左到右排列，并且换行 */
}
flex_flow.png
