理解Flexbox彈性盒子

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html參考文檔

1：要開始使用Flexbox，必須先讓父元素變成一個Flex容器。

你能夠在父元素中顯式的設置display:flex或者display:inline-flex。就這麼的簡單，這樣你就能夠開始使用Flexbox模塊。

---

 

2.Flex容器屬性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction: row || column || row-reverse || column-reverse;

 

flex-wrap: wrap || nowrap || wrap-reverse;

 

flex-flow:flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性

你還記得使用border的速記寫法？border: 1px solid red。這裏的概念是相同的，多個值寫在同一行，好比下面的示例：

ul { flex-flow: row wrap; }

justify-content屬性能夠接受下面五個值之一：

ul {
    justify-content: flex-start || flex-end || center || space-between || space-around }

align-items屬性相似於justify-content屬性。只有理解了justify-content屬性，才能更好的理解這個屬性。

align-items屬性能夠接受這些屬性值：flex-start || flex-end || center || stretch || baseline。

ul { align-items: flex-start || flex-end || center || stretch || baseline }

它主要用來控制Flex項目在Cross-Axis對齊方式。這也是align-items和justify-content兩個屬性之間的不一樣之處。

align-content

還記得前面討論的wrap屬性嗎？咱們在Flex容器中添加了更多的Flex項目。讓Flex容器中的Flex項目多行排列。

align-content屬性用於多行的Flex容器。它也是用來控制Flex項目在Flex容器裏的排列方式，排列效果和align-items值同樣，但除了baseline屬性值。

像align-items屬性同樣，它的默認值是stretch。你如今應該熟悉這些值。那它又是如何影響Flex容器裏的10個Flex項目多行排列方式。

---

 

3.Flex項目屬性

order || flex-grow || flex-shrink || flex-basis

flex-basis

記得前面我說過，Flex項目是當我沒有的。但咱們也能夠控制。

flex-basis屬性能夠指定Flex項目的初始大小。也就是flex-grow和flex-shrink屬性調整它的大小以適應Flex容器以前。

前面介紹的是很是生要的，因此咱們須要花一點時間來增強對他們的理解。

flex-basis默認的值是auto。flex-basis能夠取任何用於width屬性的任何值。好比 % || em || rem || px等。

注意：若是flex-basis屬性的值是0時，也須要使用單位。即flex-basis: 0px不能寫成flex-basis:0。

默認狀況，Flex項目的初始寬度由flex-basis的默認值決定，即：flex-basis: auto。Flex項目寬度的計算是基於內容的多少來自動計算（很明顯，加上了padding值）。

flex速記

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）。

注意它們之間的順序。flex-grow第一，而後是flex-shrink，最後是flex-basis。縮寫成GSB，能夠幫助你更好的記憶。

若是flex屬性值中少一個值，會發生什麼呢？

若是你只設置了flex-grow和flex-shrink值，flex-basis多是默認值0。這就是所謂的絕對flex項目。只有當你設置了flex-basis，你會獲得一個相對flex項目。

flex: 0 1 auto

li { flex: 0 1 auto; }

這至關於寫了flex默認屬性值以及全部的Flex項目都是默認行爲。

flex: 0 0 auto

li { flex: 0 0 auto; }

這個至關於flex: none。

仍是老規矩：寬度是被自動計算，不過彈性項目不會伸展或者收縮（由於兩者都被設置爲零）。伸展和收縮開關都被關掉了。

它基本上是一個固定寬度的元素，其初始寬度是基於彈性項目中內容大小。

flex: 1 1 auto

這與 flex: auto 項目相同。

仍是按我前面立的規矩。即，自動計算初始化寬度，可是若是有必要，會伸展或者收縮以適應整個可用寬度。

伸展和收縮開關打開了，寬度自動被計算。

flex: "positive number"

這裏正數能夠表明任何正數（沒有引號）。這與 flex: 「正數」 1 0 相同。

flex: 2 1 0 與寫爲 flex: 2 是同樣的，2 表示任何正數。

li { flex: 2 1 0; / *與 flex: 2相同 */ }

與前面我立的規矩同樣，即，將彈性項目的初始寬度設置爲零（嗯？沒有寬度？），伸展項目以填滿可用空間，而且最後只要有可能就收縮項目。

彈性項目沒有寬度，那麼寬度該如何計算呢？

這個時候 flex-grow 值就起做用了，它決定彈性項目變寬的程度。由它來負責沒有寬度的問題。

當有多個彈性項目，而且其初始寬度 flex-basis 被設置爲基於零的任何值時，好比 0px，使用這種 flex 簡寫更實用。

實際發生的是，彈性項目的寬度被根據 flex-grow 值的比例來計算。

記住設置 flex-grow : 1，會讓彈性項目填滿可用空間。伸展開關打開了。

這裏有兩個彈性項目。一個的 flex-grow 屬性值是 1，另外一個是 2，那麼會出現啥狀況呢？

兩個項目上的伸展開關都打開了。不過，伸展度是不一樣的，1 和 2。

兩者都會填滿可用空間，不過是按比例的。

它是這樣工做的：前一個佔 1/3 的可用空間，後一個佔 2/3 的可用空間。

絕對和相對Flex項目

一個相對Flex項目內的間距是根據它的內容大小來計算的。而在絕對Flex項目中，只根據 flex 屬性來計算，而不是內容。

絕對Flex項目的寬度只基於 flex 屬性，而相對Flex項目的寬度基於內容大小。

align-self

align-self 屬性更進一步讓咱們更好地控制彈性項目。

你已經看到 align-items 屬性是如何有助於總體對齊彈性容器內的全部彈性項目了。

若是想改變一個彈性項目沿着側軸的位置，而不影響相鄰的彈性項目，該怎麼辦呢？

這是 align-self 屬性大展拳腳的地方了。

該屬性的取值能夠是這些值之一：auto || flex-start || flex-end || center || baseline || stretch。

Auto-margin 對齊

當在Flex項目上使用 margin: auto 時，值爲 auto 的方向（左、右或者兩者都是）會佔據全部剩餘空間。

解決嵌套中的flex容器的佔用空間比例問題

必定有辦法讓全部這些放在一行，每一個段落佔據該行相等空間。用Flexbox來搞定！這裏的概念與不少柵格系統中用的同樣。

li { display: flex; /*段落如今顯示在一行上*/ padding: 0 20px; /*留點呼吸空間*/ min-height: 50px; } li p { flex: 0 0 25%; /*這是甜麪醬*/ }

看到段落會發生什麼了嗎？

flex: 0 0 25%; 

「不要伸展或者收縮，不過每一個段落應該佔據 25% 的可用空間」 。段落所佔空間是相等的。