display:flex 多欄多列布局

轉自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

 

display:flex 多欄多列布局瀏覽器支持狀況：火狐直接支持w3c無前綴寫法，谷歌和opera支持-webkit- 前綴寫法，比較適合移動端開發使用，

display:flex 這個牛逼的css3佈局屬性，遺憾的是隻有谷歌和火狐支持，
中國人經常使用的手機上的瀏覽器幾乎全軍覆沒，UC瀏覽器不支持，安卓4.1.1和以前版本手機自帶的瀏覽器也不支持，微信自帶瀏覽器也不支持。

看來要留給兒子們用了。

示例:

html,body{ padding:0; margin:0;}
/*
	flex-flow: row wrap; row橫向（左向右）顯示 column豎向（上向下）顯示 wrap一行顯示不完的時候換行
*/
.col{ border:red solid 1px;}
footer { height:300px;
 
  display: -webkit-flex;
  -webkit-flex-flow: row;
  -webkit-align-items: stretch;
  -webkit-justify-content:space-between;
  
  /*IE10還不支持*/
  display: -ms-flex;
  -ms-flex-flow: row wrap;
  -ms-align-items: stretch;
  -ms-justify-content:space-between;
	
  display: flex;
  flex-flow: row;
  align-items: stretch;
  justify-content:space-between;
}
.col2{-webkit-flex:1;-moz-flex:1;flex:1}
display:flex 的HTML測試結構<footer>
    <div class="col col1" style=" width:60px;">jquery特效</div>
    <div class="col col2" style="">前端路上</div>
    <div class="col col3" style="width:30px;">懶人建站</div>
</footer> 

一個Flexbox佈局是由一個伸縮容器(flex containers)和在這個容器裏的伸縮項目(flex items)組成。

　　伸縮容器(flex  containers)是一個HTML標籤元素，而且「display」屬性顯式的設置了「flex」屬性值。在伸縮容器中的全部子元素都會自動變成伸縮項目(flex  items)。
　　這有一個三列布局的例子。外面的div容器是一個伸縮容器，而裏面的left、main和right三個div都是伸縮項目：

　　設置一個簡單的伸縮容器很容易，代碼以下：

        .container {  display: flex;}        　　伸縮方向與換行(flex-flow)
　　伸縮容器有一個CSS屬性「flex-flow」用來決定伸縮項目的佈局方式。若是伸縮容器設置了「flex-flow」值爲「row」，伸縮項目排列由左向右排列：

 

　　若是「flex-flow」值設置爲「column」，伸縮項目排列由上至下排列：

　　這裏將展處樣設置伸縮容器，使用伸縮項目在一行中顯示：

.container {  display: flex;  flex-flow: row;}        　　一個伸縮容器中的全部伸縮項目既能夠排列在單行也能夠多行排列。這個主要由「flex-flow」是否設置爲「wrap」來決定。若是伸縮容器設置了「wrap」屬性值，當伸縮項目在伸縮容器中沒法在一行中顯示的時候會另起一行排列。

　　這裏展現瞭如何將伸縮容器設置爲「wrap」:

.container {  display: flex;  flex-flow: row wrap;}　　伸縮項目(flex items)
　　在伸縮容器中的全部子元素都將自動變成伸縮項目。沒有額外配置CSS的必要。你惟一須要的作的就是設置伸縮項目的尺寸。
　　若是伸縮容器把「flex-flow」設置爲「row」後，伸縮項目將須要設置他們的寬度。伸縮項目的高度將會自動設置爲伸縮容器的高度：

　若是伸縮容器把「flex-flow」設置爲「column」後，伸縮項目將須要設置他們的高度，伸縮項目的寬度將會自動設置爲伸縮容器的寬度：

　給伸縮項目設置「width」和「height」屬性來定義伸縮項目尺寸，而這個伸縮項目是獨立於其餘伸縮項目。例如，若是咱們給主內容(content)設置了一個600px的寬度，無論伸縮容器中有一個、兩個或者上百個伸縮項目，主內容的寬度都是600px。

　　若是你想伸縮項目根據伸縮容器剩餘的空間來決定伸縮項目的寬度，你可使用「flex」屬性。例如，咱們能夠告訴瀏覽器，左邊欄和右邊欄佔用了伸縮容器減去主內容寬度的空間。
　　flex的值於對應的空間成正比。若是左邊欄設置了值爲「1」和右邊欄設置了值爲「2」，伸縮容器剩餘的空間將按比例分配給左邊欄和右邊欄，而且右邊欄所佔的空間是左邊欄的兩倍：

　　下面是示例中運用在伸縮項目上的一些代碼，展現了獨立寬度和按比例計算的寬度：

.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;}　　完整的實例
　　這是一個很簡單的實例，Flexbox建立了一個經典的三列布局。主內容寬度爲60%，而邊欄是使用「flex」屬性，按比例自動根據伸縮容器剩餘空間計算獲得對應的寬度：
　　HTML結構
  …       …     …
        　　CSS代碼
.container {  display: flex;  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;}　　示例效果