CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
父盒子：
display: flex;
flex-direction 順序指定了彈性子元素在父容器中的位置。
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
子盒子：
order 屬性設置彈性容器內彈性子元素的屬性，<integer>：用整數值來定義排列順序，數值小的排在前面。可以爲負值。
設置"margin"值爲"auto"值，自動獲取彈性容器中剩餘的空間。所以設置垂直方向margin值爲"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全集中。
align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
flex 屬性用於指定彈性子元素如何分配空間。
摘抄自w3cschool文檔，目的是爲了自己在項目開發中查看文檔更加直觀，快速開發項目
父盒子：
display: flex;
flex-direction 順序指定了彈性子元素在父容器中的位置。
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
子盒子：
order 屬性設置彈性容器內彈性子元素的屬性，<integer>：用整數值來定義排列順序，數值小的排在前面。可以爲負值。
設置"margin"值爲"auto"值，自動獲取彈性容器中剩餘的空間。所以設置垂直方向margin值爲"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全集中。
align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
flex 屬性用於指定彈性子元素如何分配空間。
1、flex-direction（排序方式）
flex-direction 順序指定了彈性子元素在父容器中的位置。
語法：flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：橫向從左到右排列（左對齊），默認的排列方式。
- row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
- column：縱向排列。
- column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
![]()
![]()
![]()
2、justify-content
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
語法：justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start：
彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
- flex-end：
彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
- center：
彈性項目居中緊挨着填充。（如果剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
- space-between：
彈性項目平均分佈在該行上。如果剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
- space-around：
彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間爲負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
3、align-items（對齊方式）
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法：align-items: flex-start | flex-end | center | baseline | stretch
各個值解析:
- flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
- center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
![]()
![]()
![]()
![]()
![]()
4、flex-wrap（換行方式）
屬性用於指定彈性盒子的子元素換行方式。
語法：nowrap | wrap | wrap-reverse
- nowrap - 默認，彈性容器爲單行。該情況下彈性子項可能會溢出容器。
- wrap - 彈性容器爲多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列。
![]()
![]()
![]()
5、align-content（各個行對齊方式差別不大）
align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
語法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
各個值解析:
stretch- 默認。各行將會伸展以佔用剩餘的空間。flex-start- 各行向彈性盒容器的起始位置堆疊。flex-end- 各行向彈性盒容器的結束位置堆疊。center-各行向彈性盒容器的中間位置堆疊。space-between-各行在彈性盒容器中平均分佈。space-around- 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半![]()
6、完美的居中
使用彈性盒子，居中變的很簡單，只想要設置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
.flex{
display: flex;
}
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
7、align-self
align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
語法：align-self: auto | flex-start | flex-end | center | baseline | stretch
各個值解析:
- auto：如果'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，如果其沒有父元素，則計算值爲'stretch'。
- flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
- center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
![]()
8、flex（分配空間）
flex 屬性用於指定彈性子元素如何分配空間。
語法：flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:
- none：none關鍵字的計算值爲: 0 0 auto
- [ flex-grow ]：定義彈性盒子元素的擴展比率。
- [ flex-shrink ]：定義彈性盒子元素的收縮比率。
- [ flex-basis ]：定義彈性盒子元素的默認基準值。