1. 概要

Flexible Box翻譯過來就是彈性盒子、彈性布局，是css3中新增的一種布局方式，是當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健Ｒ霃椥圆季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

• 彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
• 彈性容器內包含了一個或多個彈性子元素。

2. justify-content 屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的橫軸（主軸線，main axis）對齊。

·justify-content 語法：

justify-content: flex-start | flex-end | center | space-between | space-around

可選項：

• flex-start：彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放。
• flex-end：彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放。
• 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語法

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 屬性

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

語法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; 

可選項:

• nowrap - 默認，彈性容器為單行。該情況下彈性子項可能會溢出容器。
• wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發(fā)生斷行
• 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-item {
    width: 100px;
    height: 100px;
    margin: auto;
}

7. align-self

align-self 屬性用于設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

選項：

• auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
• stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

8. 總結

---------------- END ----------------

======================