CSS Flex佈局屬性整理

Junru05發表於2017-05-18

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-directionflex-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-widthmin-height)時,且 flex-basis的值小於最小值時,寬度以最小值為準,當 flex-basis的值大於最小值時,以 flex-basis的值為準

5、flex

複合屬性,是flex-growflex-shrinkflex-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佈局應用

相關文章