Flex

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。
採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

1. 父元素屬性

1. display:flex;
一個容器設置了display:flex;屬性就定義了一個flex容器，它的直接子元素會接受這個flex環境

2. flex-direction
決定主軸的方向（即項目的排列方向）

 

 

 

.box { flex-direction: row | row-reverse | column | column-reverse; } 

能夠設置四個值：

• row: 默認值，水平從左到右
• colunm:垂直從上到下
• row-reverse:水平從右到左
• column-reverse：垂直從下到上

3. flex-wrap
默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

 

 

 

.box{ flex-wrap: nowrap | wrap | wrap-reverse; } 

能夠設置三個值：

• nowrap：默認值，不換行
• wrap：換行
• wrap-reverse：換行，且顛倒行順序，第一行在下方

4. flex-flow
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲row nowrap

.box { flex-flow: <flex-direction> || <flex-wrap>; } 

5. justify-content
設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，當彈性盒裏一行上的全部子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢出某行時，這一屬性一樣會在對齊上進行控制

 

 

 

.box { justify-content: flex-start | flex-end | center | space-between | space-around; } 

能夠設置5個值：

• flex-start： 默認值、彈性盒子元素將向行起始位置對齊
• flex-end： 彈性盒子元素將向行結束位置對齊
• center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊
• space-between： 彈性盒子元素會平均地分佈在行裏
• space-around ：彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半

6. align-items
設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式

 

 

 

.box { align-items: flex-start | flex-end | center | baseline | stretch; } 

能夠設置5個值：

• flex-start： 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

• flex-end： 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

• center： 彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

• baseline： 如彈性盒子元素的行內軸與側軸爲同一條，則該值與flex-start等效。其它狀況下，該值將參與基線對齊。

• stretch： 若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

7. align-content
設置或檢索彈性盒堆疊伸縮行的對齊方式

 

 

 

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 

能夠設置6個值：

• flex-start： 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，以後的每一行都緊靠住前面一行。

• flex-end： 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，以後的每一行都緊靠住前面一行。

• center： 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。

• space-between： 各行在彈性盒容器中平均分佈。第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。

• space-around： 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。

• stretch： 各行將會伸展以佔用剩餘的空間。剩餘空間被全部行平分，以擴大它們的側軸尺寸。

2. 子元素上屬性

1. order
默認狀況下flex order會按照書寫順訓呈現，能夠經過order屬性改變，數值小的在前面，還能夠是負數。

 

 

 

.item { order: <integer>; } 

2. flex-grow
設置或檢索彈性盒的擴展比率,根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間

 

 

 

.item { flex-grow: <number>; /* default 0 */ } 

假設容器的寬度爲400px, 子項1的佔用的基礎空間(flex-basis)爲50px，子項2佔用的基礎空間是70px，子項3佔用基礎空間是100px，剩餘空間爲 400-50-70-100 = 180px。 其中子項1的flex-grow: 0(未設置默認爲0)， 子項2flex-grow: 2，子項3flex-grow: 1，剩餘空間分紅3份，子項2佔2份(120px)，子項3佔1份(60px)。因此 子項1真實的佔用空間爲: 50+0 = 50px， 子項2真實的佔用空間爲: 70+120 = 190px， 子項3真實的佔用空間爲: 100+60 = 160px。

3. flex-shrink
設置或檢索彈性盒的收縮比率,根據彈性盒子元素所設置的收縮因子做爲比率來收縮空間

 

 

 

.item { flex-shrink: <number>; /* default 1 */ } 

假設容器的寬度爲400px, 子項1的佔用的基準空間(flex-basis)爲250px，子項2佔用的基準空間是150px，子項3佔用基準空間是100px，總基準空間爲 250+150+100=500px。容器放不下，多出來的空間須要被每一個子項根據本身設置的flex-shrink 進行吸取。 子項1的flex-shrink: 1(未設置默認爲1)， 子項2 flex-shrink: 2，子項3 flex-shrink: 2。子項1須要吸取的的空間爲 (250*1)/(250*1+150*2+100*2)* 100 = 33.33px，子項1真實的空間爲 250-33.33 = 216.67px。同理子項2吸取的空間爲(150*2)/(250*1+150*2+100*2)* 100=40px，子項2真實空間爲 150-40 = 110px。子項3吸取的空間爲(100*2)/(250*1+150*2+100*2) * 100 = 26.67px，真實的空間爲100-26.67=73.33px。

4. flex-basis
設置或檢索彈性盒伸縮基準值，若是全部子元素的基準值之和大於剩餘空間，則會根據每項設置的基準值，按比率伸縮剩餘空間

.item { flex-basis: <length> | auto; /* default auto */ } 

flex-basis 用於設置子項的佔用空間。若是設置了值，則子項佔用的空間爲設置的值；若是沒設置或者爲 auto，那子項的空間爲width/height 的值。

<div class="box"> <div class="item">1</div> <div class="item">222</div> <div class="item">3</div> </div> <style> .box { width: 400px; height: 50px; display: flex; background-color: #eee; } .item { height: 50px; } .item:nth-child(1) { background: red; } .item:nth-child(2) { width: 70px; flex-basis: auto; background: grey; } .item:nth-child(3) { width: 50px; flex-basis: 100px; background: yellow; }

• 對於子項1，flex-basis 若是設置默認是auto，子項佔用的寬度使用width 的寬度，width沒設置也爲 auto，因此子項佔用空間由內容決定。
• 對於子項2，flex-basis 爲auto，子項佔用寬度使用width 的寬度，width 爲70px，因此子項子項佔用空間是70px。
• 對於子項3，flex-basis 爲100px，覆蓋width 的寬度，因此子項佔用空間是100px。

5. felx
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

6. align-self
設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式，能夠覆蓋父容器align-items的設置。

 

 

 

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 

能夠配合 margin 使用獲得一些不一樣效果

 

 

上圖中，給item1設置了 margin-right: auto;，使得下面兩個元素在左，item1 單獨在右邊的效果。

 

 

轉載：https://www.jianshu.com/p/4b14a7a1c6cc