iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 6
0
自我挑戰組

CSS 大全（第四版）閱讀筆記系列 第 6 篇

Day6【主題一：Flexbox】＿統整

11th鐵人賽 flex css 布局 切版
1239 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    day26【主題六：選擇器】筆記１
  2. 27
    day27【主題六：選擇器】筆記2
  3. 28
    day28【主題六：選擇器】筆記3-動態、介面狀態虛擬類別
  4. 29
    day29【主題七：邊界範圍】
  5. 30
    day30【主題八：數值與單位】
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
173 組
團體組數
5 組
累計文章數
1036 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙