開始

本篇文章希望能夠讓大家都很清楚理解 FlexBox，很多時(shí)候小伙伴們，可能因?yàn)槔斫獾牟粔蚯宄?，從而在編寫代碼中，需要一個(gè)個(gè)的嘗試。

下面給大家推薦一個(gè) Github 比較好的一個(gè)** flexbox** 工具，以及演示地址，可以在線演示，幫助大家更快的理解。

演示地址：https://jonathantneal.github.io/flexibility/

Github地址：https://github.com/sin-ning/flexibility

基礎(chǔ)知識(shí)和術(shù)語(yǔ)

container 容器

也就所我們所謂的 parentNode，用來(lái)承載自容器的父級(jí)容器都可以叫做 container。

image

items 每一項(xiàng)

可以理解為 childrenNode，每個(gè)子節(jié)點(diǎn)。

image

我們?cè)陂_始使用的回收需要將 display 設(shè)置為 flex

.container {
  display: flex; /* or inline-flex */
}

order 排序

排序規(guī)則，可用于每個(gè)節(jié)點(diǎn)間的排序，無(wú)論你節(jié)點(diǎn)順序是什么，只要加上 order 設(shè)置數(shù)值，就會(huì)按數(shù)值排序。

如：節(jié)點(diǎn) a = 3 b=1 c=2 那么最終展示的順序是 b c a

.item {
  order: <integer>; /* default is 0 */
}

image

flex-direction

flex 方向，可用于不同的排列方式

• row（默認(rèn)）：從左到右ltr; 從右到左rtl
• row-reverse：從右到左ltr; 從左到右rtl
• column：同樣row但從上到下
• column-reverse：同樣row-reverse但從下到上

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

image

flex-grow

這定義了Flex項(xiàng)目在必要時(shí)增長(zhǎng)的能力。它接受一個(gè)無(wú)比的值作為一個(gè)比例。它規(guī)定了項(xiàng)目應(yīng)占用的Flex容器內(nèi)可用空間量。

如果所有項(xiàng)目都flex-grow設(shè)置為1，則容器中的剩余空間將平均分配給所有子項(xiàng)。如果其中一個(gè)孩子的值為2，則剩余空間將占用其他空間的兩倍（或者至少會(huì)嘗試）。

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

image

flex-wrap

默認(rèn)情況下，flex項(xiàng)目都會(huì)嘗試適合一行。您可以更改它并允許項(xiàng)目根據(jù)需要使用此屬性進(jìn)行換行。

• nowrap （默認(rèn)值）：所有彈性項(xiàng)目都在一行上
• wrap：flex項(xiàng)目將從上到下包裹到多行。
• wrap-reverse：flex項(xiàng)目將從下到上包裹多行。

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

image

justify-content

• flex-start （默認(rèn)值）：項(xiàng)目朝向起始行打包
• flex-end：物品被打包到終點(diǎn)線
• center：項(xiàng)目沿著線居中
• space-between：物品均勻分布在線上; 第一項(xiàng)是在起始行，最后一項(xiàng)是在結(jié)束行
• space-around：項(xiàng)目均勻分布在行周圍，空間相等。請(qǐng)注意，在視覺上空間不相等，因?yàn)樗许?xiàng)目在兩側(cè)都有相等的空間。第一個(gè)項(xiàng)目將在容器邊緣上有一個(gè)空間單位，但在下一個(gè)項(xiàng)目之間有兩個(gè)單位的空間，因?yàn)橄乱粋€(gè)項(xiàng)目有自己適用的間距。
• space-evenly：項(xiàng)目是分布的，以便任何兩個(gè)項(xiàng)目之間的間距（和邊緣的空間）相等。

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

image

align-items

這允許align-items為各個(gè)彈性項(xiàng)覆蓋默認(rèn)對(duì)齊（或指定的對(duì)齊）。

請(qǐng)參閱align-items說(shuō)明以了解可用的值。

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

請(qǐng)注意float，clear并且vertical-align對(duì)彈性項(xiàng)目沒有影響。

image

align-items

• flex-start：項(xiàng)目的交叉開始邊緣邊緣放置在交叉起始線上
• flex-end：項(xiàng)目的跨端邊距邊緣放在十字線上
• center：項(xiàng)目以橫軸為中心
• baseline：項(xiàng)目已對(duì)齊，例如其基線對(duì)齊
• stretch （默認(rèn)）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）

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

image

align-content

• flex-start：行打包到容器的開頭
• flex-end：行打包到容器的末尾
• center：行包裝到容器的中心
• space-between：線條均勻分布; 第一行是容器的開頭，而最后一行是在最后一行
• space-around：線條均勻分布，每條線周圍的空間相等
• stretch （默認(rèn)值）：線條拉伸以占用剩余空間

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

image