彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。
彈性盒子屬性
1.display 指定HTML元素盒子類型
display: flex; 設置為flex彈性盒子布局
2.flex-direction 指定了彈性盒子中子元素的排列方式。flex-direction的值有：
row 橫向從左到右排列，默認排列方式
row-reverse 反轉橫向排列，最后一項排在最前面
column 縱向排列
column-reverse 反轉縱向排列，最后一項排在最上面
3.justify-content 設置彈性盒子元素在主軸方向上的對齊方式。justify-content的值有：
flex-start 默認值。項目位於容器的開頭
flex-end 項目位於容器的結尾
center 項目位於容器的中心
space-between 項目位於各行之間留有空白的容器內
space-around 項目位於各行之前，之間，之后 都留有空白的容器內
4.align-items 設置彈性盒子元素在側軸方向上的對齊方式。align-items的值：
flex-start 元素位於容器的開頭。起始位置緊靠住該行的側軸起始邊界
flex-end 元素位於容器的結尾。起始位置緊靠住該行的側軸結束邊界
center 元素位於容器的中心。彈性盒子元素在該行的側軸上居中放置。若該行的尺寸小於彈性盒子元素尺寸，則會向兩個方向溢出相同的長度
stretch 默認值。元素被拉伸以適應容器。若指定側軸大小的屬性值為auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，
但同時會遵照'min/max-width/height'屬性的限制。
baseline 元素位於容器的基線上，如彈性盒子子元素的行內軸與側軸為同一條，則該值與’'flex-start'等效。其它情況下，該值將參與基線對齊。
5.flex-wrap 設置彈性盒子的子元素超出父容器時是否換行。flex-wrap的值：
nowrap 默認，彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap 彈性容器為多行，該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse 反轉 wrap 排列
6.align-content 修改flex-wrap屬性的行為，類似align-items,但不是設置子元素對齊，而是設置行對齊。align-content的值有：
stretch 默認。各行將會伸展以占用剩余的空間
flex-start 各行向彈性盒容器的起始位置堆疊
flex-end 各行向彈性盒容器的結束位置堆疊
center 各行向彈性盒容器的中間位置堆疊
space-between 各行在彈性盒容器中平均分布
space-around 各行在彈性盒容器中平均分分布，兩端保留子元素與子元素之間間距大小的一半
7.flex-flow flex-direction 和 flex-wrap 的簡寫
例：flex-flow: row wrap;
8.order 設置彈性盒子的子元素排列順序
order: number;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #main { width: 400px; height: 150px; border: 1px solid #c3c3c3; display: -webkit-flex; /* Safari */ display: flex; } #main div { width: 70px; height: 70px; } div#myRedDIV {order: 2;} div#myBlueDIV {order: 4;} div#myGreenDIV {order: 3;} div#myPinkDIV {order: 1;} </style> </head> <body> <div id="main"> <div style="background-color:coral;" id="myRedDIV"></div> <div style="background-color:lightblue;" id="myBlueDIV"></div> <div style="background-color:lightgreen;" id="myGreenDIV"></div> <div style="background-color:pink;" id="myPinkDIV"></div> </div> </body> </html>
9.align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性（用於設置彈性元素自身在側軸方向上的對齊方式）
auto 如果align-self的值為auto，則其計算值為元素的父元素的align-items值，如果其沒有父元素，則計算值為stretch
flex-start 彈性盒子子元素的側軸起始位置的邊界緊靠住該行的側軸起始邊界
flex-end 彈性盒子元素的側軸起始位置的邊界緊靠住該行的側軸結束邊界
center 彈性盒子元素在該行的側軸上居中放置（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）
baseline 如彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其他情況下，該值將參與基線對齊
stretch 如果指定側軸大小的屬性值為auto，則其值會使項目的邊距盒尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/htight屬性的限制
示例：將第二個黑色的方塊放在右下角
.parent{ background-color: pink; width: 100px; height: 100px; display: flex; flex-direction: column; justify-content: space-between; .children{ background-color: black; margin: 2px; width: 20px; height: 20px; } .children:nth-child(2){ align-self: flex-end; } }
10.flex 設置彈性盒子的子元素如何分配空間
11.flex-basis 設置或檢索彈性盒子伸縮基准值
number 一個長度單位或一個百分比，規定靈活項目的初始長度
auto 默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。
initial 設置該屬性為它的默認值
inherit 從父元素繼承該屬性
.parent { width: 100%; height: 100%; display: flex; .children { width: 20px; height: 50px; } } /*設置第二個彈性盒元素的初始長度為 80 像素*/ .children:nth-child(2) { flex-basis: 80px; }
12.flex-grow 用於設置或檢索彈性盒子的擴展比率
number 一個數字，規定項目相對於其他靈活的項目進行擴展的量
initial 該屬性為它的默認值
inherit 從父元素繼承該屬性
/*
當父元素的寬度大於子元素之和時，flex-grow 會分享剩余的空間，通過 flex-grow 的值來進行分配
最初每個子元素寬度都是 40 ，第1，3分享了1份，第二個div分享了2份，最終 寬度為 60 80 60
*/ .parent { width: 200px; height: 100%; display: flex; .children { width: 40px; height: 50px; } } /*讓第二個元素的寬度為其他元素的2倍：*/ .children:nth-child(1) { flex-grow: 1; } .children:nth-child(2) { flex-grow: 2; } .children:nth-child(3) { flex-grow: 1; }
13.flex-shrink 指定了flex元素的收縮規則。flex元素僅在默認寬度之和大於容器的時候才會發生收縮，
其收縮的大小是依據 flex-shrink 的值.
number 一個數字，規定項目將相對於其他靈活的項目進行收縮的量
/*
父元素的寬度是300，子元素的寬度是100，總的寬度就是400。寬度超出100，
定義的第二個子元素的收縮值為 3，默認為1，總共就是6，一份相當於 100/6
則第 1，3，4 收縮 100/6，第二個元素收縮 (100/6) * 3
*/ .parent { width: 300px; height: 100%; display: flex; .children { width: 100px; height: 100px; flex-shrink: 1;/*默認值 1*/ } } .children:nth-child(2){ flex-shrink: 3; }