1.伸縮容器屬性
1.1設定伸縮容器
設定元素為伸縮容器：display: flex;
設定元素為內聯級伸縮容器：display: inline-flex。下面的元素會上來。
1.2主軸方向
flex-direction屬性決定主軸的方向（即專案的排列方向）。
flex-direction: row;
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
1.3主軸換行
預設情況下，專案都排在一條線（又稱"軸線"）上。
flex-wrap屬性定義，如果一條軸線排不下，可以換行。
flex-wrap: nowrap;
nowrap （預設值）：伸縮專案為單行，伸縮容器不夠，伸縮專案會縮小。
wrap：伸縮專案分為多行，如果伸縮容器高度大於伸縮專案高度，會從平均分後的位置開始顯示。
wrap-reverse：反轉 wrap 排列。
1.4主軸方向和主軸換行復合屬性
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為 row nowrap。
flex-flow: row nowrap;
1.5主軸對齊
justify-content屬性定義了伸縮專案在主軸上的對齊方式。
justify-content: flex-start;
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端無間距，中間均勻分布。
space-around：兩端間距是中間的一半，中間間距是均勻分布的。
space-evenly: 兩端和中間都有間距，且均勻分布。
1.6側軸對齊(主軸不換行)
align-items屬性定義伸縮專案在側軸上如何對齊。
align-items: stretch;
stretch（預設值）：在側軸上拉伸。如果伸縮專案未設定高度或設為auto，將佔滿整個容器的高度。
flex-start：側軸的起點對齊。如果伸縮專案未設定高度或設為auto，高度是靠內容撐開的。
flex-end：側軸的終點對齊。
center：側軸的中點對齊。
baseline: 伸縮專案的第一行文字的基線對齊。
1.7側軸對齊(主軸換行)
align-content屬性定義了側軸方向上有多根軸線的對齊方式。如果側軸方向上只有一根軸線，該屬性不起作用。
flex-wrap: wrap;先設定主軸換行(因為預設主軸是不換行的)
align-content: stretch;
stretch（預設值）：如果伸縮專案未設定高度或設為auto，軸線佔滿整個側軸。
如果設定了高度，就不會拉伸，但會佔位置。
flex-start：與側軸的起點對齊。
flex-end：與側軸的終點對齊。
center：與側軸的中點對齊。
space-between：兩端無間距，中間均勻分布。
space-around：兩端間距是中間的一半，中間間距是均勻分布的。
space-evenly: 兩端和中間都有間距，且均勻分布。
2.伸縮專案屬性
2.1基準
flex-basis 屬性定義了在分配多餘空間之前，伸縮專案佔據的主軸空間。它的預設值為 auto ，即伸縮專案的本來大小。
flex-basis: 10px;代替伸縮專案在主軸方向上的寬或者高度。
2.2伸
flex-grow 屬性定義伸縮專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-grow: 1;如果所有伸縮專案的 flex-grow 屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個伸縮專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
2.3縮
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。flex-shrink: 1;
如果乙個伸縮專案的 flex-shrink 屬性為0，則空間不足時，不縮小。
如果所有伸縮專案的 flex-shrink 屬性都為1，當空間不足時，都將等比例縮小。
計算方法：分母:每個伸縮專案的寬度x自己的shrink加起來
假設空間不足200px，則：每個伸縮專案縮小空間是：(每個伸縮專案的寬度x自己的shrink/分母)x200px
2.4 flex
flex 是復合屬性，是 flex-grow , flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto。
flex: 1;
如果縮寫為 flex: 1 , 則其計算值為 1 1 0%。伸縮，基準值為0，主軸平均分。
如果縮寫 flex: auto , 則其計算值為 1 1 auto。伸縮，基準值按設定的。
如果flex: none , 則其計算值為0 0 auto。不伸縮，基準值按設定的。
如果 flex: 0 auto 則其計算值為0 1 auto。不伸，但縮，基準值按設定的。
2.5 伸縮專案排序
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
order: 1;若其它都為0，這個會排到最後。
2.6 伸縮專案單獨設定側軸對齊方式
align-self 屬性允許單個伸縮專案有與其他伸縮專案不一樣的對齊方式，可覆蓋父元素的align-items 屬性。align-self:auto;
預設值為 auto，表示繼承父元素的 align-items 屬性。
flex-start：側軸的起點對齊。
flex-end：側軸的終點對齊。
center：側軸的中點對齊。
baseline: 伸縮專案的第一行文字的基線對齊。
stretch：如果伸縮專案未設定高度或設為auto，將佔滿整個容器的高度。
CSS3 flex 伸縮布局盒模型
css3引入一種新的布局模式 flexbox布局 1.優點 flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，可以調節伸縮專案的相對大小和位置。非常適用於排列方向改變，縮放與收縮用的比較多的專案。2.基本概念 由於flexbox並不只是個屬性，而是乙個模組，會有好多屬性，以及重要的名...
伸縮盒模型flexbox
伸縮 彈性 盒模型flexbox 決定乙個盒子在其他盒子中的分布以及如何處理可用的空間，使用該 模型可以建立 自適應 瀏覽器視窗的流動布局，可以規定特定的順序，開啟只需要設定display屬 性值為flex目的是在瀏覽器視窗變化時，盒子相應的改變大小。設定了彈性盒模型後，float clear ve...
Flex彈性盒模型
flex direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...