CSS Flex布局整理

注意相容問題：

示例的dom結構：

<
div 
class
="box"
>
<
div 
class
="item"
>1
div>
<
div 
class
="item"
>2
div>
<
div 
class
="item"
>3
div>
div>

基礎樣式設計：

.box .item

1、flex-direction：用於指定flex主軸的方向，繼而決定 flex子項在flex容器中的位置，取值：row | row-reverse | column | column-reverse；

flex-direction四種取值的效果圖如下：

2、flex-wrap：用於指定flex子項是否換行，取值：nowrap | wrap | wrap-reverse；

flex-wrap三種取值的效果圖如下：

從示例圖中不難發現，換行以後兩行之間產生了很大的間距，這個問題，在後面介紹的align-content屬性中可以得到很好的解決。

3、flex-flow：復合屬性，是flex-direction和flex-wrap的簡寫屬性，是用於指定flex子項的排列方式；

4、justify-content：用於指定主軸(水平方向)上flex子項的對齊方式，取值：flex-start | flex-end | center | space-between | space-around；

justify-content的前三種取值的效果圖如下：

justify-content取值為space-between的效果圖如下(注意特殊情況下效果等同於flex-start)：

5、align-items：用於指定側軸(垂直方向)上flex子項的對齊方式，取值：stretch | flex-start | flex-end | center | baseline

align-items取值為stretch的效果圖如下：

align-items取值為flex-start flex-end center的效果圖如下：

align-items取值為baseline的效果圖如下：

再次強調：該屬性只作用於多行的情況，在只有一行的flex容器上無效，另外該屬性可以很好的處理，換行以後相鄰行之間產生的間距。

align-content各個取值的效果圖如下：

align-content.png

1、order：該屬性用來指定flex子項的排列順序，數值越小，越靠前，可以為負數

取值：數值，預設值為0；

2、flex-grow：用來指定flex子項的擴充套件比例，不可以為負數，flex容器會根據flex子項設定的擴充套件比例作為比率來分配剩餘空間，

取值：數值，預設值為0，表示即使存在剩餘空間，flex子項也不會擴充套件

如下圖中，按照1:3分配剩餘空間：

用來指定flex子項的收縮比例，不可以為負數，flex容器會根據flex子項設定的收縮比例作為比率來收縮各個flex子項

取值：數值，預設值為1，表示所有子項在剩餘空間為負數時，等比例收縮

注意：flex-shrink只能在不換行的情況下使用

如下圖中，按照1:3收縮：

用來指定flex子項的佔據的空間，不可以為負數

取值：auto | length | percentage | content

如下圖中，為item設定flex-basis: 50%;,在按照1:3分配剩餘空間：

grow.png

容器寬度為200px，item1原始寬度為50px，設定flex-basis: 50%;後寬度變成100px，擴充套件後寬度為110.5px；而item2原始寬度為50px，擴充套件後為81.5px，比例正好是1:3

注意：設定flex-grow進行分配剩餘空間，或者使用flex-shrink進行收縮都是在flex-basis的基礎上進行的；

當flex-basis的值以及width（或者height）的值均為非auto時，

當width（或者height）的值為auto時，且內容的長度大於flex-basis設定的值，此時以content自身長度值為準，且不能進行flex-shrink收縮。相反如果內容的長度小於flex-basis設定的值，則會使用flex-basis設定的值；

當存在最小值min-width（min-height）時，且flex-basis的值小於最小值時，寬度以最小值為準，當flex-basis的值大於最小值時，以flex-basis的值為準

5、flex

復合屬性，是flex-grow、flex-shrink和flex-basis的簡寫屬性，用來指定flex子項如何分配空間

取值：none | 各拆分項屬性

注意：6、align-self

用來單獨指定某flex子項的對齊方式

CSS Flex布局整理

css flex布局實用

css flex布局基礎

css flex布局知識梳理

CSS Flex布局整理

css flex布局實用

css flex布局基礎

css flex布局知識梳理

相關推薦