css3引入一種新的布局模式-flexbox布局
1. 優點：flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，可以調節伸縮專案的相對大小和位置。非常適用於排列方向改變，縮放與收縮用的比較多的專案。
2. 基本概念
由於flexbox並不只是個屬性，而是乙個模組，會有好多屬性，以及重要的名詞和概念，這裡簡要列舉下。
a 主軸和側軸：預設就是就是水平軸和垂直軸。但可以用justify-content屬性進行修改。測軸就是與主軸垂直的方向。
b 主軸 主軸方向：伸縮專案都沿著主軸方向進行排列。
c 主軸長度：就是伸縮專案在主軸上的長度或高度（看你的軸是row 還是column）
側軸就不贅述了，以此類推。
3. 功能：
4. 伸縮容器屬性
1）伸縮流方向。是指伸縮容器的主軸方向，決定了伸縮專案放置在伸縮容器中的排列方向。主要通過flex-direction設定
2）伸縮行換行。控制當伸縮專案溢位時的換行方法.flex-wrap設定
3）伸縮方向與換行，上面兩個的綜合：flex-flow
4）主軸對齊，專案如何在伸縮容器中對齊方式。
5）側軸對齊。與主軸類似，就是方向上是垂直的。
6）堆疊伸縮行。是控制伸縮專案行在布局軸的對方方式，有點像測軸對齊。
5.flex彈性布局
只要乙個元素被宣告為flex布局，它內部的所有元素的display都是flex的，flex中的模組寬高都是與內容大小適應的。
水平的主軸，垂直的交叉軸。flex容器內的元素預設按主軸排列
容器的屬性：
屬性解釋
flex-direction
專案的排列方向
可選值含義
row（預設值）
排列方式為水平排列，元素從左到右排
row-reverse
排列方式為水平排列，元素從右到左排
column
排列方式為垂直排列，元素從上到下排
column-reverse
排列方式為垂直排列，元素從下到上排
flex-wrap
預設情況下，專案都排在一條線上，該屬性定義了如果一條軸線排不開時，內部元素如何換行
可選值含義
nowrap（預設值）
不換行,讓所有內部元素都擠在一行
wrap
換行，第一行在上
wrap-reverse
換行，第一行在下
flex-flow
是flex-direction與flex-wrap的簡寫形式 預設值：row nowrap
justify-content
定義專案在水平方向上的對齊方式。
可選值含義
flex-start(預設)
左對齊flex-end
右對齊center
居中space-between
兩端對其，專案中間的間隔都相等
space-around
每個專案兩側的間隔相等。專案之間的間隔為二倍
align-items
定義專案在垂直方向上如何對齊，讓人鬱悶的垂直居中，可以用這個很easy實現
可選值含義
flex-start
上對齊flex-end
下對齊center
中點對齊，是內部每個模組在垂直方向上居中
baseline
第一行文字的基線對其，包含文字的框不一定對齊。
stretch
未設定高度的專案，將拉伸沾滿整個容器,設了高度則無效
align-content
也是對齊方式的一種，當垂直方向上有額外的空間時，來設定內部div位置。一般配合flex-wrap:wrap使用。 演示 可選值與justify-content一樣，並多了stretch。含義的話，可以想象把原來的水平軸向右旋轉90度然後進行排列。 預設值是stretch，佔滿整個交叉軸。
flex中每個專案的屬性。
屬性含義
order
值為整數，越小，該專案應該排在軸上的最前面。預設為0。可以為負值
flex-grow
專案的放大比例。如果有剩餘空間，則按比例放大。預設為0
flex-shrink
定義專案縮小的比例，預設為1，也就是如果空間不足，專案將縮小。如果不想讓他縮，則設為0。負值無效。
flex-basis
定義專案分配空餘空間前，該專案所佔的主軸空間。預設為auto，本來的大小。
flex
是上面三個grow，shrink,basis的簡寫。預設 0 1 auto。auto（1 1 auto）；none（0 0 auto）建議寫這個，而不是寫三個分開的屬性。
align-self
允許他有自己的對齊方式。可覆蓋align-iterms屬性。如果沒有父元素定義，則為stretch
CSS3 Flex 彈性模型布局用法
檢視 css某個屬性，相容情況 css3 flex布局 盒子模型 box sizing border box 預設 content box 平時普通盒子模型，padding，border，盒子會變大,向外擴充套件 border box 盒子模型，padding,border,盒子模型不變大,向內擴充...
CSS3 Flex盒模型深入研究
css3大力推出的flex盒模型，應該是現在布局世界中的一大神器，各種屬性使用和介紹比比皆是，然而css本身就是乙個相互作用和影響的世界，彈性盒子也一樣。最近利用flex盒子布局時，偶遇一些怪異現象，比如flex shrink無效，align item失效等等，決定好好研究一下這些屬性之間的相互作用...
CSS3 Flex布局（容器）
item1 item2 item3 item4 item5 flex flow屬性是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap。justify content屬性定義了專案在主軸上的對齊方式。align items屬性定義專案在交叉軸上如何對齊。...