關於CSS3中的Flex整理

背景

  Flexbox佈局模塊旨在提供一個更有效的方式，在一個容器裏面去佈局分配空間。即便容器的大小是未知的，或者動態變化的。
  Flex 佈局背後的主要思想是讓容器可以改變其項目的寬度 / 高度(和順序) ，以最佳地填充可用空間(主要是適應各類顯示設備和屏幕大小)。 Flex 容器擴展項以填充可用的空閒空間或縮小它們以防止溢出。
  最重要的是，flexbox 佈局與常規佈局(基於垂直方向的塊佈局和基於水平方向的內聯佈局)相比，具備方向不可知性。 雖然這些對於頁面來講工做得很好，可是它們缺少靈活性來支持大型或複雜的應用程序(特別是在方向改變、調整大小、拉伸、縮小等方面)。

原理

   因爲 flexbox 是一個完整的模塊，而不是一個單獨的屬性，它涉及到不少東西，包括它的整個屬性集。 其中一些被設置在容器上(父元素，稱爲「 flex container」) ，而另外一些被設置在子元素上(稱爲「 flex item」)。若是「常規」佈局基於塊流方向和內聯流方向，那麼 flex 佈局基於「 flex-flow 方向」。 請看一下規範中的這個圖，解釋一下 flex 佈局背後的主要思想。

項目將按照主軸(main-axis,從main start到main end)或交叉軸(從cross start到cross end)進行佈局。

main-axis: 主軸線,伸縮容器的主軸線是伸縮項目佈局的主軸線。 注意，它不必定是水平的; 它取決於 flex-direction 屬性

main-start, main-end: 從 main-start 開始，到 main-end，flex 項目被放置在容器中

main-size: 主尺寸,一個伸縮項目的寬度或高度，以主尺寸爲準，是該項目的主尺寸。 Flex 項的主尺寸屬性是「 width」或「 height」，以主尺寸中的值爲準

cross axis： 交叉軸,與主軸垂直的軸稱爲交叉軸。它的方向取決於主軸的方向

cross-start | cross-end： 彈性線充滿了項目，並放置到容器從cross-start延續到cross-end。

cross-size： flex item的寬度或高度，以交叉尺寸中的哪個爲準，就是項目的cross size。 cross size屬性是交叉尺寸中的「width」或「height」中的任何一個。

父級屬性（flex container）

1. flex-direction

flex-direction決定了主軸方向即flex item排列方向，除了默認的row方向以外，還能夠縱向、反向（row-reverse/column-reverse）排列flex item

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
複製代碼

css:

.flex-container {
  display: flex;
  flex-direction: row;
}
複製代碼

效果：

2. flex-wrap

若是咱們不想在窗口變窄的狀況下壓縮flex item，而是讓超出邊界的flex item換行顯示那咱們能夠設置flex container的flex-wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
複製代碼

css:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
複製代碼

效果：在頁面不斷變小的時候，就會換行

3. flex-flow

flex-direction和flex-wrap能夠合併爲一個屬性flex-flow，好比：flex-flow: row-reverse wrap

4. justify content

  這定義了沿主軸的對齊方式。 當一行中的全部 flex項都不靈活，或者靈活但已經達到其最大大小時，它有助於分配額外的剩餘可用空間。 當項目溢出線的時候，它也對項目的排列有必定的控制做用。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
}
複製代碼

css:

.flex-container {
  display: flex;
  justify-content: center;
}
複製代碼

效果：

5. align-items

實現了flex方向的居中後，垂直於主軸方向的居中能夠用align-items實現。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end
}
複製代碼

css:

.flex-container {
  display: flex;
  align-items: center;
}
複製代碼

效果：

6. align-content

多行的狀況下，將在內部對齊一個 flex 容器的線，相似於調整內容對齊主軸中單個項的方式。 若是flex只有一行，就不會起做用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline
}
複製代碼

子類屬性（flex item）

1. order

默認狀況下，flex 項按源順序排列。 可是，order 屬性控制它們在 flex 容器中出現的順序。

css:

.one {
  order: 3
}

.two {
  order: 1
}

.three {
  order: 2
}
複製代碼

效果：

2. flex-grow

   在上面全部的例子中，三個flex item只佔據了flex container小部分空間，若是想讓flex item佔滿flex container咱們須要給flex item設置flex-grow屬性。顧名思義，grow意味着增加，用於控制flex item的尺寸的伸展。

css:

.one {
 flex-grow: 2;
}

.two {
  flex-grow: 8;
}

.three {
  flex-grow: 2;
}
複製代碼

效果：

劃重點：

1. flex-grow若是是負數則無效
2. 每一個item劃分多餘的空間並非按flex-grow的比例來劃分，是每一個item自身的width * 自身的flex-grow的結果的比例來劃分！親測！！！

3. flex-shrink

與flex-grow相對的是flex-shrink， flex-shrink用於控制子元素尺寸超過flex container後，對子元素的壓縮。 劃重點：

1. flex-shrink若是是負數則無效

4. flex-basis

這定義了在分配剩餘空間以前元素的默認大小。

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

auto 關鍵字的意思是「查看自身的width 或 height 屬性」。

5. flex

這是 flex-grow、 flex-shrink 和 flex-basis 組合的簡稱。 第二個和第三個參數(伸縮和伸縮基礎)是可選的。建議使用此簡寫屬性，而不是設置單個屬性。

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

6. align-self

這容許重寫單個 flex 項的默認對齊方式(或 align-items 指定的對齊方式)。

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

css:

.flex-container {
  display: flex;
  align-items: center;
}

.one {
  align-self: flex-end;
}
複製代碼

效果：

結語：

flex先整理到這裏，很強大很好用。 另外注意：float, clear and vertical-align 對flex項目沒有影響。

參考連接： flexbox指南