flex佈局的溫故學習

flex的簡介

在flex的容器中默認存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認的設置，不過咱們能夠經過設置將主軸的方向變成垂直方向，交叉軸變成水平方向。
在一個被設置爲flex的容器中，每一個直接子元素都被稱之爲flex item，每一個flex item佔據着主軸空間是main size，佔據交叉軸上的空間叫作corss size;

須要注意的是：主軸和交叉軸的方向是能夠設置的，默認的是主軸爲水平方向、交叉軸爲垂直方向；固然RN的表現和瀏覽器相反，默認主軸是垂直方向

flex容器

爲了實踐一個flex佈局，咱們首先須要一個容器，也就是父元素，並指定爲flex佈局，這樣，容器就具有了上述的flex的特性，其直接子元素也將成爲flex item；設置爲flex容器也很簡單：

.root{
    display: flex | inline-flex;  // 兩個值均可以使用
}

上述的兩個值能夠分別生成一個塊級flex容器盒子、一個行內flex容器盒子，簡單說來，若是你使用塊元素如 div，你就可使用 flex，而若是你使用行內元素，你可使用 inline-flex。
須要注意的是：當時設置 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將會失效。

設置爲flex的容器，有如下六種能夠設置的屬性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

這裏會對這幾個屬性進行分別的解釋

flex-direction 設置flex容器的主軸方向

flex-direction 決定主軸的方向(即項目的排列方向)，

.root{
    display: flex | inline-flex;  // 兩個值均可以使用
    flex-direction: row | row-reverse | column | column-reverse; // 四個值可選
}

1. row：主軸與行內軸方向做爲默認的書寫模式。即橫向從左到右排列（左對齊）。
2. row-reverse：對齊方式與row相反。[右對齊]
3. column：主軸與塊軸方向做爲默認的書寫模式。即縱向從上往下排列（頂對齊）。
4. column-reverse：對齊方式與column相反。【底對齊】

僞代碼和僞展現分別對應以下的方式：

<div class="root">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
<div>

//   flex-direction: row  水平靠左排列 第一個元素在左邊
【1，2，3  】
//   flex-direction: row-reverse  水平靠右排列 第一個元素在右邊
【  3，2，1】
//   flex-direction: column  垂直靠頂部排列 第一個元素在最頂部
【
  1，
  2，
  3，
  】
//   flex-direction: column-reverse  垂直靠底部排列 第一個元素在最底部
【
  3，
  2，
  1，
  】

注意：該屬性經過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。這將決定flex須要如何進行排列，不只是對齊方向，還有是子元素的排列順序，第一個元素或者order靠前的將會出如今對齊方向的第一個位置處

flex-wrap 設置flex容器的子項目在主軸方向是否能夠換行展現

默認的狀況下，項目都應展開在主軸線上，經過設置flex-wrap能夠達到主軸線上換行展現

.root{
    flex-wrap: nowrap | wrap | wrap-reverse; // 三個值選其一
}

三個取值分別是：

1. nowrap默認值，也就是即便容器的空間不足，也不會換行，而是調整子元素的尺寸。
2. wrap是指若是子元素超出了容器的空間，那麼須要換行，並且須要按Z字順序排開，即第一行在最上方；
3. wrap-reverse是指換行展現，可是按照逆序的Z排開，即第一排在最下方，每一排的主軸方向的排序仍是按照flex-direction的設置展現。

flex-flow 是一個相似的語法糖，是前面所訴的二者的結合體

flex-flow：<' flex-direction '> || <' flex-wrap '>，能夠看到這是一個複合屬性。設置或檢索彈性盒模型對象的子元素排列方式。

.root{
    flex-flow: row nowrap;
}
// 等同於如下
.root{
    flex-direction: row;
    flex-wrap: nowrap;
}

justify-content 設置主軸方向上的對齊方式

justify-content；定義了項目在主軸的對齊方式。

.root{
    justify-content：flex-start | flex-end | center | space-between | space-around; // 五個值選其一
}

這個屬性的設置和flex-direction屬性有關，下面的值都將是以flex-direction: row;進行判斷的，其中的五個值分別是：

1. flex-start: 是指靠主軸方向的起始位置對齊，flex-direction: row;條件下就是子元素靠左邊對齊，儘量空出右邊；[1,2,3, _ _ _ _ _ _]
2. flex-end: 是指靠主軸方向的結束位置對齊，flex-direction: row;條件下就是子元素靠右對齊；儘量空出左邊。[_ _ _ _ _ _,1,2,3]
3. center: 是指靠主軸的中心位置對齊，flex-direction: row;條件下就是子元素居中對齊；儘量左右兩邊空出相同空間；[_ _ _1,2,3, _ _ _]
4. space-between: 是指在主軸上左右兩邊不留空隙，並使子元素之間的間隙相等；[1,_ _ _,2,_ _ _,3]
5. space-around: 是指主軸上左右兩邊也留空隙，全部的子項目兩側自身邊距相等，均勻分佈在主軸上，因此項目之間的間隔比項目與邊緣的間隔大一倍。[_,1,_ _,2,_ _,3,_]

align-items 定義了項目在交叉軸上的對齊方式

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

默認值是stretch,這五個值：

1. flex-start是指在交叉軸方向上的各子元素之間的對齊方式是在交叉軸的起點對齊；
2. flex-end 是指在交叉軸上的對齊方式是以交叉軸的重點對齊方式；
3. center 是在交叉軸方向上是以交叉軸方向上的居中方式對齊
4. baseline 是在交叉軸的方向上的第一行文字的基線對齊
5. stretch 是在交叉軸上的子項目未設置高度或者設爲 auto，將佔滿整個容器的高度。

align-content

定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用;當你 flex-wrap 設置爲 nowrap 的時候，容器僅存在一根軸線，由於項目不會換行，就不會產生多條軸線。

當你 flex-wrap 設置爲 wrap 的時候，容器可能會出現多條軸線，這時候你就須要去設置多條軸線之間的對齊方式了。

創建在主軸爲水平方向時測試，即 flex-direction: row, flex-wrap: wrap

.root{
    align-content：flex-start | flex-end | center | space-between | space-around | stretch
}

1. flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，以後的每一行都緊靠住前面一行。
2. flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，以後的每一行都緊靠住前面一行。
3. center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（若是剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）
4. space-between：各行在彈性盒容器中平均分佈。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它狀況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
5. space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它狀況下，各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。
6. stretch：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸。

子容器flex-item

有六種屬性可運用在 item 項目上：

1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

order:

定義項目在容器中的排列順序，數值越小，排列越靠前，默認值爲 0

.item {
    order: <integer>;
}

flex-basis:

定義了在分配多餘空間以前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間

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

默認值：auto，即項目原本的大小, 這時候 item 的寬高取決於 width 或 height 的值。

當主軸爲水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，flex-basis 須要跟 flex-grow 和 flex-shrink 配合使用才能發揮效果。

當 flex-basis 值爲 0 % 時，是把該項目視爲零尺寸的，故即便聲明該尺寸爲 140px，也並無什麼用。
當 flex-basis 值爲 auto 時，則跟根據尺寸的設定值(假如爲 100px)，則這 100px 不會歸入剩餘空間。

flex-grow 定義項目的放大比例

.item {
    flex-grow: <number>;
}

默認值爲 0，即若是存在剩餘空間，也不放大;

當全部的項目都以 flex-basis 的值進行排列後，仍有剩餘空間，那麼這時候 flex-grow 就會發揮做用了。
若是全部項目的 flex-grow 屬性都爲 1，則它們將等分剩餘空間。(若是有的話)

若是一個項目的 flex-grow 屬性爲 2，其餘項目都爲 1，則前者佔據的剩餘空間將比其餘項多一倍。

固然若是當全部項目以 flex-basis 的值排列完後發現空間不夠了，且 flex-wrap：nowrap 時，此時 flex-grow 則不起做用了，這時候就須要接下來的這個屬性。

flex-shrink

.item {
    flex-shrink: <number>;
}

默認值: 1，即若是空間不足，該項目將縮小，負值對該屬性無效。

flex

flex-grow, flex-shrink 和 flex-basis的簡寫

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

這裏能夠看出，雖然每一個項目都設置了寬度爲 50px，可是因爲自身容器寬度只有 200px，這時候每一個項目會被同比例進行縮小，由於默認值爲 1。
同理可得：

若是全部項目的 flex-shrink 屬性都爲 1，當空間不足時，都將等比例縮小。

若是一個項目的 flex-shrink 屬性爲 0，其餘項目都爲 1，則空間不足時，前者不縮小。

• auto (1 1 auto)
• none (0 0 auto)
• 1 (1,,1, 0%)
• 0 (0,1,0%)
• 當 flex 取值爲一個長度或百分比，則視爲 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，
• 當 flex 取值爲兩個非負數字，則分別視爲 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，
• 當 flex 取值爲一個非負數字和一個長度或百分比，則分別視爲 flex-grow 和 flex-basis 的值，flex-shrink 取 1

align-self

容許單個項目有與其餘項目不同的對齊方式
單個項目覆蓋 align-items 定義的屬性

默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch。

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

這個跟 align-items 屬性時同樣的，只不過 align-self 是對單個項目生效的，而 align-items 則是對容器下的全部項目生效的。