CSS Flex布局屬性整理

Flex布局

• display: flex; 將對象作為彈性伸縮盒展示，用於塊級元素
• display: inline-flex; 將對象作為彈性伸縮盒展示，用於行內元素

注意兼容問題：

• webkit內核瀏覽器應使用前綴-webkit
• IE瀏覽器，可以很好的兼容IE11+版本，對於IE10只有部分可以兼容，且使用時需增加-ms，IE10瀏覽器中容器定義成彈性伸縮盒時，需使用display: -ms-flexbox

示例的dom結構：

<div class="box"> <!--容器--> <div class="item">1</div> <!--子項--> <div class="item">2</div> <div class="item">3</div> </div>

基礎樣式設計：

.box {
  width: 200px;
  height: 200px;
  background-color: #58a;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  background-color: #fb3;
}

Flex 作用於Box容器上的6個屬性介紹

1、flex-direction

用於指定Flex主軸的方向，繼而決定 Flex子項在Flex容器中的位置

取值：row | row-reverse | column | column-reverse

• row：默認值，表示水平方向從左到右排列，此時水平方向軸線為主軸
• row-reverse：與row相反
• column：表示垂直方向從上到下排列，此時垂直方向軸線為主軸
• column-reverse：與column相反

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

 

row.png
column.png

 

2、flex-wrap

用於指定Flex子項是否換行

取值：nowrap | wrap | wrap-reverse

• nowrap：默認值，表示不換行，Flex子項可能會溢出
• wrap：表示換行，溢出的Flex子項會被放到下一行
• wrap-reverse：表示反方向換行

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

 

wrap.png

 

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

3、flex-flow

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

4、justify-content

用於指定主軸(水平方向)上Flex子項的對齊方式

取值：flex-start | flex-end | center | space-between | space-around

• flex-start：默認值，表示與行的起始位置對齊
• flex-end：表示與行的結束位置對齊
• center：表示與行中間對其
• space-between：表示兩端對齊，中間間距相等。要注意特殊情況，當剩余空間為負數或者只有一個項時，效果等同於flex-start
• space-around：表示間距相等，中間間距是兩端間距的2倍。要注意特殊情況，當剩余空間為負數或者只有一個項時，效果等同於center

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

 

justify-content.png

 

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

 

space-between.png

 

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

 

space-around.png

 

5、align-items

用於指定側軸(垂直方向)上Flex子項的對齊方式

取值：stretch | flex-start | flex-end | center | baseline

• stretch：默認值，當Flex子項未設置高度或者高度值為auto時，stretch起作用，將Flex子項高度設置為行高度。這里需要注意，在只有一行的情況下，行的高度為容器的高度，即Flex子項高度為容器的高度
• flex-start：表示與側軸開始位置對齊
• flex-end：表示與側軸的結束位置對齊
• center：表示與側軸中間對其
• baseline：表示基線對齊，當行內軸與側軸在同一線上，即所有Flex子項的基線在同一線上時，效果等同於flex-start

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

 

stretch.png

 

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

 

align-items.png

 

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

 

baseline.png

 

6、align-content

該屬性只作用於多行的情況下，用於多行的對齊方式

取值：stretch | flex-start | flex-end | center | space-between | space-around

• stretch：默認值，當Flex子項未設置高度或者高度值為auto時，stretch起作用，將Flex子項高度設置為行高度。
• flex-start：表示各行與側軸開始位置對齊，第一行緊靠側軸開始邊界，之后的每一行都緊靠前面一行
• flex-end：表示各行與側軸的結束位置對齊，最后一行緊靠側軸結束邊界，之后的每一行都緊靠前面一行
• center：表示各行與側軸中間對其
• space-between：表示兩端對齊，中間間距相等。要注意特殊情況，當剩余空間為負數時，效果等同於flex-start
• space-around：表示各行之間間距相等，中間間距是兩端間距的2倍。要注意特殊情況，當剩余空間為負數時，效果等同於center

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

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

 

align-content.png

 

Flex 作用於子項上的6個屬性介紹

1、order

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

取值：數值，默認值為0

2、flex-grow

用來指定Flex子項的擴展比例，不可以為負數，Flex容器會根據Flex子項設置的擴展比例作為比率來分配剩余空間

取值：數值，默認值為0，表示即使存在剩余空間，Flex子項也不會擴展

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

 

grow.png

 

3、flex-shrink

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

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

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

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

 

shrink.png

 

4、flex-basis

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

取值：auto | length | percentage | content

• auto：默認值，計算規則：檢索Flex子項是否設置了width值（或者height值，取決於flex-direction），如果設置了非auto的值，則使用width值（或者height值），若沒有則使用content
• length：用長度值定義寬度，不可為負數
• percentage：使用百分比定義寬度，不可為負數

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

 

grow.png

 

容器寬度為200px，Item1原始寬度為50px，設置 flex-basis: 50%;后寬度變成100px，擴展后寬度為110.5px；而Item2原始寬度為50px，擴展后為81.5px，比例正好是1:3

注意：

1. 設置flex-grow進行分配剩余空間，或者使用flex-shrink進行收縮都是在flex-basis的基礎上進行的；

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

   • 1）若content長度同時大於flex-basis的值以及width（或者height）的值，此時以flex-basis與width（或者height）中值大的為准 ，但是，如果子項設置了overflow: hidden;或者overflow: auto;，此時以flex-basis值為准；
   • 2）若content長度同時小於flex-basis的值以及width（或者height）的值，此時以flex-basis值為准；
   • 3）若content長度小於flex-basis的值，大於width（或者height）的值，此時以flex-basis值為准；
   • 4）若content長度大於flex-basis的值，小於width（或者height）的值，此時以content自身長度值為准；

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

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

5、flex

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

取值：none | 各拆分項屬性

• none：0 0 auto
• auto：1 1 auto
• 1：1 1 0%
• 0 auto 或 initial：0 1 auto 即初始值

注意：

• flex-grow：默認值為0，若省略則被默認為1
• flex-shrink：默認值為1，省略時默認為1
• flex-basis：默認值為auto，省略時默認為0%

6、align-self

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

取值：auto | flex-start | flex-end | center | baseline | stretch

• auto：默認值，查找父元素的align-items值，如果沒有則取值為stretch
• 其他值同align-items

如果想了解更多關於Flex布局的內容，可以查看Flex布局應用