iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 6

Day6【主題一:Flexbox】_統整

  • 分享至 

  • xImage
  •  

一、屬性統整:

1-1、作用於彈性容器上:

  • flex-direction(控制子項整體佈局方向)
  • flex-wrap(控制子項整體單行顯示還是換行顯示)
  • flex-flow(前二項縮寫)
  • justify-content(主軸方向的的對齊和分佈方式)
  • align-items(flex子項們相對於flex容器在垂直方向上的對齊方式)
  • align-content(垂直軸方向的的對齊和分佈方式,如果所有flex子項只有一行,則align-content屬性是沒有任何效果的)
  • 寫給自己看的display: flex佈局教程

1-2、作用於彈性項目上:

  • order(flex子項的排序位置)
  • flex-grow(擴展比例)
  • flex-shrink(收縮比例)
  • flex-basis(分配剩餘空間之前元素的默認大小)
  • flex(前三項縮寫)
  • align-self(單獨某一個flex子項的垂直對齊方式)

二、學習flex時網路上好文推薦(主要為兼容性探討主題)


上一篇
Day5【主題一:Flexbox】_彈性項目相關屬性/flex屬性/flex-grow屬性/flex-shrink屬性/flex-basis屬性/flex縮寫/order屬性
下一篇
Day7【主題二:轉場】_CSS轉場/轉場屬性
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言