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?？s寫成 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% ?的可用空間”?。段落所占空間是相等的。

?

總結

以上是生活随笔為你收集整理的理解Flexbox弹性盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。