Flexbox 完整指南（css flex）
開始
本篇文章希望能夠讓大家都很 清楚理解 FlexBox， 很多時候小夥伴們，可能因為理解的不夠清楚，從而在編寫程式碼中，需要一個個的嘗試。
下面給大家推薦一個 Github 比較好的一個** flexbox** 工具，以及演示地址，可以在 線演示 ，幫助大家更快的理解。
演示地址： ofollow,noindex">https://jonathantneal.github.io/flexibility/
Github地址： https://github.com/sin-ning/flexibility
基礎知識和術語
container 容器
也就所我們所謂的 parentNode ，用來承載自容器的父級容器都可以叫做 container。
image
items 每一項
可以理解為 childrenNode ，每個子節點。
image
我們在開始使用的回收需要將 display 設定為 flex
.container {
display: flex; /* or inline-flex */
}
order 排序
排序規則，可用於每個節點間的排序， 無論你節點順序是什麼，只要加上 order 設定數值，就會按數值排序 。
如：節點 a = 3 b=1 c=2 那麼最終展示的順序是 b c a
.item {
order: <integer>; /* default is 0 */
}
image
flex-direction
flex 方向，可用於不同的排列方式
- row（預設）：從左到右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專案在必要時增長的能力。它接受一個無比的值作為一個比例。它規定了專案應占用的Flex容器內可用空間量。
如果所有專案都flex-grow設定為1，則容器中的剩餘空間將平均分配給所有子項。如果其中一個孩子的值為2，則剩餘空間將佔用其他空間的兩倍（或者至少會嘗試）。
.item {
flex-grow: <number>; /* default 0 */
}
image
flex-wrap
預設情況下，flex專案都會嘗試適合一行。您可以更改它並允許專案根據需要使用此屬性進行換行。
- nowrap （預設值）：所有彈性專案都在一行上
- wrap：flex專案將從上到下包裹到多行。
- wrap-reverse：flex專案將從下到上包裹多行。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
image
justify-content
- flex-start （預設值）：專案朝向起始行打包
- flex-end：物品被打包到終點線
- center：專案沿著線居中
- space-between：物品均勻分佈在線上; 第一項是在起始行，最後一項是在結束行
- space-around：專案均勻分佈在行周圍，空間相等。請注意，在視覺上空間不相等，因為所有專案在兩側都有相等的空間。第一個專案將在容器邊緣上有一個空間單位，但在下一個專案之間有兩個單位的空間，因為下一個專案有自己適用的間距。
- space-evenly：專案是分佈的，以便任何兩個專案之間的間距（和邊緣的空間）相等。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
image
align-items
這允許align-items為各個彈性項覆蓋預設對齊（或指定的對齊）。
請參閱align-items說明以瞭解可用的值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
請注意float，clear並且vertical-align對彈性專案沒有影響。
image
align-items
- flex-start：專案的交叉開始邊緣邊緣放置在交叉起始線上
- flex-end：專案的跨端邊距邊緣放在十字線上
- center：專案以橫軸為中心
- baseline：專案已對齊，例如其基線對齊
- stretch （預設）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
image
align-content
- flex-start：行打包到容器的開頭
- flex-end：行打包到容器的末尾
- center：行包裝到容器的中心
- space-between：線條均勻分佈; 第一行是容器的開頭，而最後一行是在最後一行
- space-around：線條均勻分佈，每條線周圍的空間相等
- stretch （預設值）：線條拉伸以佔用剩餘空間
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
image