開(kāi)始
本篇文章希望能夠讓大家都很清楚理解 FlexBox，很多時(shí)候小伙伴們，可能因?yàn)槔斫獾牟粔蚯宄嘁瑥亩诰帉?xiě)代碼中，需要一個(gè)個(gè)的嘗試赶站。
下面給大家推薦一個(gè) Github 比較好的一個(gè)** flexbox** 工具幔虏，以及演示地址，可以在線(xiàn)演示贝椿，幫助大家更快的理解想括。
演示地址：https://jonathantneal.github.io/flexibility/
Github地址：https://github.com/sin-ning/flexibility
基礎(chǔ)知識(shí)和術(shù)語(yǔ)
container 容器
也就所我們所謂的 parentNode，用來(lái)承載自容器的父級(jí)容器都可以叫做 container烙博。
items 每一項(xiàng)
可以理解為 childrenNode瑟蜈，每個(gè)子節(jié)點(diǎn)。
我們?cè)陂_(kāi)始使用的回收需要將 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 */
}
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;
}
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 */
}
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;
}
justify-content
- flex-start （默認(rèn)值）：項(xiàng)目朝向起始行打包
- flex-end：物品被打包到終點(diǎn)線(xiàn)
- center：項(xiàng)目沿著線(xiàn)居中
- space-between：物品均勻分布在線(xiàn)上; 第一項(xiàng)是在起始行，最后一項(xiàng)是在結(jié)束行
- space-around：項(xiàng)目均勻分布在行周?chē)饩海臻g相等政供。請(qǐng)注意，在視覺(jué)上空間不相等朽基，因?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;
}
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)目沒(méi)有影響杉适。
align-items
- flex-start：項(xiàng)目的交叉開(kāi)始邊緣邊緣放置在交叉起始線(xiàn)上
- flex-end：項(xiàng)目的跨端邊距邊緣放在十字線(xiàn)上
- center：項(xiàng)目以橫軸為中心
- baseline：項(xiàng)目已對(duì)齊，例如其基線(xiàn)對(duì)齊
- stretch （默認(rèn)）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
- flex-start：行打包到容器的開(kāi)頭
- flex-end：行打包到容器的末尾
- center：行包裝到容器的中心
- space-between：線(xiàn)條均勻分布; 第一行是容器的開(kāi)頭柳击，而最后一行是在最后一行
- space-around：線(xiàn)條均勻分布猿推，每條線(xiàn)周?chē)目臻g相等
- stretch （默認(rèn)值）：線(xiàn)條拉伸以占用剩余空間
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
