1.flex速記

1.1 flex: 0 1 auto

很容易理解這一點，flex-basis設(shè)置為auto，這意味著Flex項目的初始寬度計算是基于內(nèi)容的大小來自動變化

flex-grow設(shè)置為0，這意味著flex-grow不會改變Flex項目的初始寬度，也就是flex-grow的開關(guān)是關(guān)閉的，Flex項目不會放大以適應(yīng)屏幕（Flex容器大小）

flex-shrink的值是1，說明縮小開關(guān)是開啟的，也就是Flex項目在必要時會縮小

1.2 flex: 0 0 auto

寬度是自動計算，不過彈性項目不會伸展或者收縮（因為二者都被設(shè)置為零），也就是伸展和收縮開關(guān)都被關(guān)掉了

它基本上是一個固定寬度的元素，其初始寬度是基于彈性項目中內(nèi)容大小

注意這里一個彈性項目會比另一個容納更多內(nèi)容

應(yīng)該注意到的第一件事情是，這兩個彈性項目的寬度是不同的。因為寬度是基于內(nèi)容寬度而自動計算的。所以縮放一下瀏覽器，當內(nèi)容過長的時候你會注意到因為彈性項目不會收縮其寬度。它們從父元素中突出來了，要看到所有內(nèi)容，必須橫向滾動瀏覽器

1.3 flex: 1 1 auto

自動計算初始化寬度，但是如果有必要，會伸展或者收縮以適應(yīng)整個可用寬度，伸展和收縮開關(guān)打開了，寬度自動被計算

1.4 flex: “positive number”

這里正數(shù)可以代表任何正數(shù)（沒有引號）

注:將彈性項目的初始寬度設(shè)置為零（嗯？沒有寬度？），伸展項目以填滿可用空間，并且最后只要有可能就收縮項目

注：彈性項目沒有寬度，那么寬度該如何計算呢？這個時候 flex-grow 值就起作用了，它決定彈性項目變寬的程度。由它來負責沒有寬度的問題

2.絕對(flex:1)和相對Flex項目(flex:auto)

那絕對和相對Flex項目之間到底有啥區(qū)別呢？二者之間主要的區(qū)別在于間距及如何計算間距？？

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

2.1 相對Flex項目

這里Flex項目的初始寬度是被自動計算的（flex-basis: auto），上面示例中Flex項目的內(nèi)容大小不相同，所以Flex項目的大小就會不相等且可以自動伸縮

2.2 絕對Flex項目

這里只修改一行CSS代碼，因為之前說過初始寬度是0，所以寬度根據(jù)flex-grow屬性來決定，它們會伸展以適應(yīng)可用空間。

總結(jié)：絕對Flex項目的寬度只基于 flex 屬性，而相對Flex項目的寬度會基于內(nèi)容大小而改變，再輔以自動伸縮

3. Auto-margin對齊

注：一定要當心Flex項目上的 margin: auto 對齊。當在Flex項目上使用 margin: auto 時，事情看起來就很怪異了

當在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間

- flex-grow 值為設(shè)置為0。這就解釋了為什么列表項不會伸展

- Flex項目向Main-Axis的開頭對齊（這是默認行為）

- 由于項目被對齊到Main-Axis開頭，右邊就有一些多余的空間?？吹搅税?#xff1f;

現(xiàn)在在第一個列表項（branding）上使用 margin: auto，看看會出啥情況

剛剛發(fā)生了什么？之前的剩余空間現(xiàn)在已經(jīng)被分配到第一個Flex項目的右邊了

還記得我前面說的話吧？當在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間

如果想讓一個Flex項目的兩邊都用自動外邊距對齊，該怎么辦呢？

注：那么，這是不是對很酷的自動外邊距對齊的一種折衷方案呢？看起來是。如果沒注意的話，它也可能是受挫之源。當在一個Flex項目上使用自動外邊距（margin: auto）時，justify-content 屬性就不起作用了

總結(jié)：在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間

總結(jié)

以上是生活随笔為你收集整理的CSS之flex需要知道的一切（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。