1、再說css3 flex
一旦一個容器賦予了display:flex屬性，將會有以下特點：
- 項目無法設置浮動。
- 列表的樣式會被清除。
- 無法使用
vertical-align設置垂直對齊方式。
目前互聯網上關於flex流動布局的文章很少，搜索關於flex的文章，大部分還介紹的是舊的知識點，顯然已經不符合當前的w3c標准了，要想了解flex的相關內容，可以參考
http://qianduanblog.com/2549.html。並且，支持flex的瀏覽器也很少，只有谷歌瀏覽器完全支持，其他低版本的webkit不完全支持，火狐也不完全支持（不支持flex-wrap），ie10及以上部分支持。
flex布局非常適宜當前的移動設備和大屏幕瀏覽器網頁開發非常的便捷，是未來網頁開發布局設計的方向，是一個未來技術。flex布局能夠編寫代碼小，各種寬度、高度、位置都由瀏覽器自身按照既定規則完成適配，跨平台無障礙閱讀體驗。
2、flex 樣式類
- css3 flex 的部分屬性在ie和火狐下表現不佳或支持不完善，其中ie9及以下完全不支持，ie10不支持
flex-grow（即.flex-grow-0 .flex-grow-1類），火狐24不支持flex-wrap（即.flex-wrap類）。 - css3 flex 布局以主軸在水平方向、側軸在垂直方向為准，行（主軸）為水平方向、列（側軸）為垂直方向。當主軸在垂直方向、側軸在水平方向時，行即為垂直方向，列即為水平方向。無論怎樣，行都為主軸、列都為側軸。
- 以下各個flex布局類命名均以主軸在水平方向為准，即主軸為行；並且大部分類名都是應用在父級flex容器上的，除了
.flex-grow-0 .flex-grow-1。 - flex容器：
- 行布局：
.flex-row - 行反布局：
.flex-row-reverse - 列布局：
.flex-col - 列反布局：
.flex-col-reverse - 換行布局（默認是不支持換行的*）：
.flex-wrap
- 行布局：
- flex容器單行水平方向項目排列方式
- 開始方向排列：
.flex-row-start - 居中方向排列：
.flex-row-center - 結束方向排列：
.flex-row-end - 兩端方向排列，開始結束有余白：
.flex-row-around - 兩端方向排列，開始結束無余白：
.flex-row-between
- 開始方向排列：
- flex容器多行垂直方向項目排列方式
- 開始方向排列：
.flex-rows-start - 居中方向排列：
.flex-rows-center - 結束方向排列：
.flex-rows-end - 兩端方向排列，開始結束有余白：
.flex-rows-around - 兩端方向排列，開始結束無余白：
.flex-rows-between
- 開始方向排列：
- flex容器單行垂直方向項目對齊方式
- 開始對齊：
.flex-col-start - 居中對齊：
.flex-col-center - 結束對齊：
.flex-col-end - 拉伸對齊：
.flex-col-stretch
- 開始對齊：
- flex項目垂直方向項目對齊方式（與
.flex-col類似，只是其優先級更高）- 開始對齊：
.flex-self-start - 居中對齊：
.flex-self-center - 結束對齊：
.flex-self-end - 拉伸對齊：
.flex-self-stretch
- 開始對齊：
- flex項目在剩余空白上分配占比
- 占比為0：
.flex-grow-0 - 占比為1：
.flex-grow-1
- 占比為0：
下面依次說說如何使用該樣式類。
2.0、簡要說明
flex樣式類，在描述行和列的時候，是以主軸為水平、側軸以垂直方向為例的（參考：http://qianduanblog.com/2549.html#1%E3%80%81%E6%B5%81%E5%8A%A8%E5%B8%83%E5%B1%80），此時行即為水平方向、列即為垂直方向；但如果主軸在垂直方向、側軸在水平方向時，行即為垂直方向、列即為水平方向。因在實際情況中，前者使用的概率最大，所以采用以行描述主軸在水平方向、列描述側軸在垂直方向，更為直觀。
2.1、flex初始化
使用.flex樣式類即可對容器進行flex初始化。如下圖：
demo：http://demo.qianduanblog.com/2881/1.html
其HTML代碼如：
2.2、主軸方向
.flex-row（默認）：flex行布局，即主軸在水平方向、側軸在垂直方向。.flex-row-reverse：flex行反布局，與.flex-row類似，更改水平方向從右往左。.flex-col：flex列布局，即主軸在垂直方向、側軸在水平方向。.flex-col-reverse：flex行反布局，與.flex-col類似，更改垂直方向從下往上。.flex-wrap：換行布局，即主軸在水平方向時，主軸可以折行，類似於現在的文字換行；反之，主軸在垂直方向，主軸可以折列，類似於古代的文字換列，在使用多列布局時，需設置容器的高度。
如圖：
demo：http://demo.qianduanblog.com/2881/2.html
主軸折行示例：
同理，折列也是相同情況，demo：http://demo.qianduanblog.com/2881/3.html。
2.3、單行水平方向排列方式
.flex-start（默認）：居左排列。.flex-center：居中排列。.flex-end：居右排列。.flex-around：分散排列。.flex-between：分開排列。
如圖：
demo：http://demo.qianduanblog.com/2881/4.html。
2.4、多行垂直方向排列方式
需設置容器的固定高度。
.flex-rows-start（默認）：多行居頂對齊。.flex-rows-center：多行居中對齊。.flex-rows-end：多行居底對齊。.flex-rows-around：多行分散對齊。.flex-rows-between：多行分開對齊。
如圖：
詳細demo：http://demo.qianduanblog.com/2881/5.html。
2.5、單行內對齊方式
.flex-col-start（默認）：頂部對齊。.flex-col-center：居中對齊。.flex-col-end：居底對齊。.flex-col-stretch：拉伸對齊。
如圖：
詳細demo：http://demo.qianduanblog.com/2881/6.html。
2.6、單項目行內對齊方式
該樣式作用於flex項目，與.flex-col-*相同，表示垂直方向的對齊方式，只是其只作用於單個flex項目，優先級比它高。詳細：
.flex-self-start（默認）：項目垂直方向居頂對齊。.flex-self-center：項目垂直方向居中對齊。.flex-self-end：項目垂直方向居中對齊。.flex-self-stretch：項目垂直方向拉伸對齊。
如圖：
詳細demo：http://demo.qianduanblog.com/2881/7.html。
2.7、剩余空間分配占比
該樣式作用於flex項目。
.flex-grow-0（默認）：剩余空間分配占比為0。.flex-grow-1：剩余空間分配占比為1。
如圖：
詳細demo：http://demo.qianduanblog.com/2881/8.html
原文鏈接：http://qianduanblog.com/2881.html