CSS Flex佈局屬性整理

Junru05發表於2017-05-18
CSSFlex

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四種取值的效果圖如下：

CSS Flex佈局屬性整理
row.png

CSS Flex佈局屬性整理
column.png

2、flex-wrap

用於指定Flex子項是否換行

取值：nowrap | wrap | wrap-reverse

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

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

CSS Flex佈局屬性整理
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 的前三種取值的效果圖如下：

CSS Flex佈局屬性整理
justify-content.png

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

CSS Flex佈局屬性整理
space-between.png

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

CSS Flex佈局屬性整理
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 的效果圖如下：

CSS Flex佈局屬性整理
stretch.png

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

CSS Flex佈局屬性整理
align-items.png

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

CSS Flex佈局屬性整理
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 各個取值的效果圖如下：

CSS Flex佈局屬性整理
align-content.png

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

1、order

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

取值：數值，預設值為0

2、flex-grow

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

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

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

CSS Flex佈局屬性整理
grow.png

3、flex-shrink

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

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

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

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

CSS Flex佈局屬性整理
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分配剩餘空間：

CSS Flex佈局屬性整理
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佈局應用

相關文章