flex佈局及常用屬性

1、flex-direction屬性()

flex-direction: row | row-reverse | column | column-reverse

  1. row(默認值):主軸爲水平方向,起點在左端
  2. row-reverse:主軸爲水平方向,起點在右端
  3. column:主軸爲垂直方向,起點在上沿
  4. column-reverse:主軸爲垂直方向,起點在下沿

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-i6O30CLo-1593769876213)(en-resource://database/2071:1)]

2、flex-wrap屬性(如果一條軸線排不下,如何換行)

flex-wrap: nowrap | wrap | wrap-reverse

  1. nowrap(默認):不換行
  2. wrap:換行,第一行在上方
  3. wrap-reverse:換行,第一行在下方

3、flex-flow屬性(上述兩個組合)

flex-flow: flex-direction, flex-wrap

flex-direction屬性和flex-wrap屬性的簡寫形式,默認值爲row nowrap

4、justify-content屬性(在主軸上的對齊方式)橫向

justify-content: flex-start | flex-end | center | space-between | space-around

  1. flex-start(默認值):左對齊
  2. flex-end:右對齊
  3. center: 居中
  4. space-between:兩端對齊,項目之間的間隔都相等
  5. space-around:每個項目兩側的間隔相等
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QTCyNrPL-1593769876216)(en-resource://database/2067:1)]

5、align-items屬性(在交叉軸上如何對齊)縱向

align-items: flex-start | flex-end | center | baseline | stretch

  1. flex-start:交叉軸的起點對齊
  2. flex-end:交叉軸的終點對齊
  3. center:交叉軸的中點對齊
  4. baseline: 項目的第一行文字的基線對齊
  5. stretch(默認值):如果項目未設置高度或設爲auto,將佔滿整個容器的高度
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yBGqedgC-1593769876218)(en-resource://database/2065:1)]

6、flex-grow屬性(放大比例,默認爲0,即如果存在剩餘空間,也不放大)

flex-grow: 默認爲0

  • 如果所有項目的flex-grow屬性都爲1,則它們將等分剩餘空間(如果有的話)
  • 如果一個項目的flex-grow屬性爲2,其他項目都爲1,則前者佔據的剩餘空間將比其他項多一倍

比如父級是width: 800px,三個子級width: 200px,第二項將分掉剩餘的空間比其他項多兩倍(剩餘200px按照1:2:1的比例佔據
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KN0LNmoj-1593769876221)(en-resource://database/2069:1)]

7、flex-shrink屬性(縮小比例,默認爲1,即如果空間不足,則縮小)

flex-shrink: 默認爲1

  • 如果所有項目的flex-shrink屬性都爲1,當空間不足時,都將等比例縮小
  • 如果一個項目的flex-shrink屬性爲0,其他項目都爲1,則空間不足時,前者不縮小

8、flex-basis屬性(在分配多餘空間之前,項目佔據的主軸空間)

flex-basis: | auto

可以設爲跟width或height屬性一樣的值(比如350px),則項目將 佔據固定空間

9、flex屬性

flex屬性是flex-grow, flex-shrinkflex-basis的簡寫,默認值爲0 1 auto。後兩個屬性可選

flex: auto; (1 1 auto)
flex: none; (0 0 auto)


主軸、縱軸

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GIQdFI57-1593769876224)(en-resource://database/2073:1)]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章