Flexbox早有耳聞，但是決定切實嘗試一番，還是因為看了這條圍脖：
我覺得用flexbox可以實現，但是發覺無從下手，屬性特性都不了解。趁此機會，學習下。
-----------------------------------------------------------------------------------------------------------------------------------------------------------
---->flex container的屬性
---->flex item的屬性
---->練習一：子元素的完美居中問題
---->練習二：不使用媒體查詢多塊元素根據分辨率自動排列
---->練習三：添加媒體查詢，基本頁面布局伸縮
上面demo要用現代瀏覽器打開，並且要記得不斷改變瀏覽器窗口的大小，來查看效果。
flex container的屬性
display：
首先，對於container應用下面代碼，針對它的直接子元素創建一個flex的上下文。
.container { display: flex; /* or inline-flex */ }
flex-direction：
它建立一個主軸，用來確定flex items在flex container中的放置方向。
.container { flex-direction: row | row-reverse | column | column-reverse; }
**row（default） ：flex item從左向右排列(如果你定義了direction屬性的話，這里會有影響)；
**row-reverse : flex item從右向左排列；
**column : 跟row相同，但是是從上向下排列；
**column-reverse ： 跟row-reverse相同，但是是從下向上排列；
flex-wrap:
默認的情況下，flex items會嘗試在一行中顯示，通過制定這個屬性相關的值，你可以定義是否換行。direction屬性的值 會影響到flex-wrap的值的作用。
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
**nowrap：單行，flex item從左向右顯示（direction：ltr）；
**wrap: 多行，flex item從左向右顯示；
**wrap-reverse：多行，flex item顯示方向與direction定義的方向相反。
flex-flow：
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
這個屬性是flex-direction和flex-wrap屬性的簡寫，默認值是 row nowrap。
justify-content：
它定義了相對主軸的對齊方式。它定義了水平方向上剩余空間的分配方式。
.container { justify-content: flex-start | flex-end | center | space-between | space-around; }
可以根據上面的示意圖尋找合適的屬性。
align-items:
這個屬性定義flex item在十字軸（垂直於主軸）的當前行上的默認行為。
.container { align-items: flex-start | flex-end | center | baseline | stretch; }
align-content:
這個屬性定義了在垂直方向上剩下的空間的分配方式。
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
flex item的屬性
order：
一般情況下，flex items會按照他們在文檔中的順序來排列。order屬性可以控制他們在flex container中的顯示順序。
.item { order: <integer>; }
flex-grow：
給flex items設置flex-grow的數值可以讓flex items根據數值比例自適應分配空間。就像上面圖中一樣的。（不要用負值）
.item { flex-grow: <number>; /* default 0 */ }
flex-shrink：
這個屬性定義flex items的伸縮能力。（不要用負值）
.item { flex-shrink: <number>; /* default 1 */ }
flex-basis：
這個屬性定義了在有剩余的空間可分布時一個元素的默認大小。
.item { flex-basis: <length> | auto; /* default auto */ }
flex：
這個屬性是 flex-grow, flex-shrink和flex-basis的縮寫。默認值是 0 1 auto
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
align-self：
這個元素與flex items自己的對齊方式有關
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
了解了之后接着跟着練習寫demo（源代碼都放在github上面）：
總結：
雖然它很強大，但是如果需要考慮瀏覽器的兼容性的話，可能就需要另尋它法了。這里是它的瀏覽器兼容性一覽表：
關於最前面微博那道題目的解法，那個微博下面已經有貼了代碼啦，貼過來看看：
http://ajccom.sinaapp.com/demo/test.html
http://codepen.io/airen/pen/PwoNrQ
上面兩個代碼都值得學習呢。
不過我覺得喔，第一個demo就符合要求了啦。