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

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

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

原理

由于 flexbox 是一個(gè)完整的模塊，而不是一個(gè)單獨(dú)的屬性，它涉及到很多東西，包括它的整個(gè)屬性集。 其中一些被設(shè)置在容器上(父元素，稱為“ flex container”) ，而另一些被設(shè)置在子元素上(稱為“ flex item”)。如果“常規(guī)”布局基于塊流方向和內(nèi)聯(lián)流方向，那么 flex 布局基于“ flex-flow 方向”。 請(qǐng)看一下規(guī)范中的這個(gè)圖，解釋一下 flex 布局背后的主要思想。

項(xiàng)目將按照主軸(main-axis,從main start到main end)或交叉軸(從cross start到cross end)進(jìn)行布局。

main-axis:主軸線,伸縮容器的主軸線是伸縮項(xiàng)目布局的主軸線。 注意，它不一定是水平的; 它取決于 flex-direction 屬性

main-start, main-end:從 main-start 開(kāi)始，到 main-end，flex 項(xiàng)目被放置在容器中

main-size:主尺寸,一個(gè)伸縮項(xiàng)目的寬度或高度，以主尺寸為準(zhǔn)，是該項(xiàng)目的主尺寸。 Flex 項(xiàng)的主尺寸屬性是“ width”或“ height”，以主尺寸中的值為準(zhǔn)

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

cross-start | cross-end：彈性線充滿了項(xiàng)目，并放置到容器從cross-start延續(xù)到cross-end。

cross-size：flex item的寬度或高度，以交叉尺寸中的哪一個(gè)為準(zhǔn)，就是項(xiàng)目的cross size。 cross size屬性是交叉尺寸中的“width”或“height”中的任何一個(gè)。

父級(jí)屬性（flex container）

 1. flex-direction

flex-direction決定了主軸方向即flex item排列方向，除了默認(rèn)的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;
}

效果：在頁(yè)面不斷變小的時(shí)候，就會(huì)換行

3. flex-flow

flex-direction和flex-wrap可以合并為一個(gè)屬性flex-flow，比如： flex-flow: row-reverse wrap

4. justify content

這定義了沿主軸的對(duì)齊方式。 當(dāng)一行中的所有 flex項(xiàng)都不靈活，或者靈活但已經(jīng)達(dá)到其最大大小時(shí)，它有助于分配額外的剩余可用空間。 當(dāng)項(xiàng)目溢出線的時(shí)候，它也對(duì)項(xià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

實(shí)現(xiàn)了flex方向的居中后，垂直于主軸方向的居中可以用align-items實(shí)現(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)部對(duì)齊一個(gè) flex 容器的線，類似于調(diào)整內(nèi)容對(duì)齊主軸中單個(gè)項(xiàng)的方式。 如果flex只有一行，就不會(huì)起作用。

.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

默認(rèn)情況下，flex 項(xiàng)按源順序排列。 但是，order 屬性控制它們?cè)?flex 容器中出現(xiàn)的順序。

css:

.one {
  order: 3
}

.two {
  order: 1
}

.three {
  order: 2
}

效果：

2. flex-grow

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

css:

.one {
 flex-grow: 2;
}

.two {
  flex-grow: 8;
}

.three {
  flex-grow: 2;
}

效果：

劃重點(diǎn)

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

3. flex-shrink

與flex-grow相對(duì)的是flex-shrink， flex-shrink用于控制子元素尺寸超過(guò)flex container后，對(duì)子元素的壓縮。 劃重點(diǎn)：

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

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

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

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

5. flex

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

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

6. align-self

這允許重寫單個(gè) flex 項(xiàng)的默認(rèn)對(duì)齊方式(或 align-items 指定的對(duì)齊方式)。

.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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論