Flexbox布局模塊旨在提供一個更有效的方式，在一個容器里面去布局分配空間。即使容器的大小是未知的，或者動態(tài)變化的。

Flex 布局背后的主要思想是讓容器能夠改變其項目的寬度 / 高度(和順序) ，以最佳地填充可用空間(主要是適應(yīng)各種顯示設(shè)備和屏幕大小)。 Flex 容器擴展項以填充可用的空閑空間或縮小它們以防止溢出。

最重要的是，flexbox 布局與常規(guī)布局(基于垂直方向的塊布局和基于水平方向的內(nèi)聯(lián)布局)相比，具有方向不可知性。 雖然這些對于頁面來說工作得很好，但是它們?nèi)狈`活性來支持大型或復(fù)雜的應(yīng)用程序(特別是在方向改變、調(diào)整大小、拉伸、縮小等方面)。

原理

由于 flexbox 是一個完整的模塊，而不是一個單獨的屬性，它涉及到很多東西，包括它的整個屬性集。 其中一些被設(shè)置在容器上(父元素，稱為“ flex container”) ，而另一些被設(shè)置在子元素上(稱為“ flex item”)。如果“常規(guī)”布局基于塊流方向和內(nèi)聯(lián)流方向，那么 flex 布局基于“ flex-flow 方向”。 請看一下規(guī)范中的這個圖，解釋一下 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延續(xù)到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換行顯示那我們可以設(shè)置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

這定義了沿主軸的對齊方式。 當(dāng)一行中的所有 flex項都不靈活，或者靈活但已經(jīng)達到其最大大小時，它有助于分配額外的剩余可用空間。 當(dāng)項目溢出線的時候，它也對項目的排列有一定的控制作用。

.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

實現(xiàn)了flex方向的居中后，垂直于主軸方向的居中可以用align-items實現(xiàn)。

.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

多行的情況下，將在內(nèi)部對齊一個 flex 容器的線，類似于調(diào)整內(nèi)容對齊主軸中單個項的方式。 如果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 容器中出現(xiàn)的順序。

css:

.one {
  order: 3
}

.two {
  order: 1
}

.three {
  order: 2
}

效果：

2. flex-grow

在上面所有的例子中，三個flex item只占據(jù)了flex container小部分空間，如果想讓flex item占滿flex container我們需要給flex item設(shè)置flex-grow屬性。顧名思義，grow意味著增長，用于控制flex item的尺寸的伸展。

css:

.one {
 flex-grow: 2;
}

.two {
  flex-grow: 8;
}

.three {
  flex-grow: 2;
}

效果：

劃重點

• flex-grow如果是負數(shù)則無效
• 每個item劃分多余的空間并不是按flex-grow的比例來劃分，是每個item自身的width * 自身的flex-grow的結(jié)果的比例來劃分！親測！??！

3. flex-shrink

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

flex-shrink如果是負數(shù)則無效 4. flex-basis

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

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

auto 關(guān)鍵字的意思是“查看自身的width 或 height 屬性”。

5. flex

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

.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;
}

效果：

到此這篇關(guān)于深入淺析CSS3中的Flex布局整理的文章就介紹到這了,更多相關(guān)css flex 布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論