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個屬性介紹

一、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

二、flex-wrap

用於指定Flex子項是否換行

取值：nowrap | wrap | wrap-reverse

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

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

wrap.png

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

三、flex-flow

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

四、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

五、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

六、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個屬性介紹

一、order

該屬性用來指定Flex子項的排列順序，數值越小，越靠前，能夠爲負數

取值：數值，默認值爲0

二、flex-grow

用來指定Flex子項的擴展比例，不能夠爲負數，Flex容器會根據Flex子項設置的擴展比例做爲比率來分配剩餘空間

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

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

grow.png

三、flex-shrink

用來指定Flex子項的收縮比例，不能夠爲負數，Flex容器會根據Flex子項設置的收縮比例做爲比率來收縮各個Flex子項

取值：數值，默認值爲1，表示全部子項在剩餘空間爲負數時，等比例收縮

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

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

shrink.png

四、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的值爲準

五、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%

六、align-self

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

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

• auto：默認值，查找父元素的align-items值，若是沒有則取值爲stretch
• 其餘值同align-items

若是想了解更多關於Flex佈局的內容，能夠查看Flex佈局應用