有了這套flex頁面佈局方案，頁面什麼的，那都不是事。

 1、CSS3彈性盒子
彈性盒子是CSS3的一種新佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
2、瀏覽器支持

3、CSS3 彈性盒子內容

4、CSS3 彈性盒子經常使用屬性

 

 

1. flex-direction 屬性

決定項目的方向。

注意：若是元素不是彈性盒對象的元素，則 flex-direction 屬性不起做用。

2. flex-wrap 屬性

flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

能夠取三個值：
（1） nowrap (默認)：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3. flex-flow 屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

4. align-items屬性

5. justify-content屬性
justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

5、彈性子元素屬性

1. order屬性

：用整數值來定義排列順序，數值小的排在前面。能夠爲負值，默認爲0。

2. flex-grow屬性

：一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。默認值是 0。

3. flex-shrink屬性

：一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。默認值是 1。

4. flex-basis屬性

：一個長度單位或者一個百分比，規定元素的初始長度。
auto：默認值。長度等於元素的長度。若是該項目未指定長度，則長度將根據內容決定。
5. flex屬性
flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

6. align-self屬性

取值同 align-items。