iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
2
自我挑戰組

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

Day1【主題一:Flexbox】_Flexbox基礎

【主題一:Flexbox】單元:

  1. Flexbox基礎
  2. 彈性容器(flex container)
  3. 排列彈性項目
  4. 彈性內容
  5. 調整內容
  6. 對齊項目
  7. align-self屬性
  8. align-content
  9. 彈性項目
  10. 彈性項目相關屬性
  11. flex屬性
  12. flex-grow屬性
  13. flex-shrink屬性
  14. flex-basis屬性
  15. flex縮寫
  16. order屬性

【1-1 Flexbox基礎】重點整理:

  • Flexbox是個簡單又強大的排版工具,透過指定頁面上各組成部分佔據的空間、內容的對齊、及視覺上的順序進行排版。
  • 內容外觀能與原始碼的順序脫勾(不影響螢幕報讀軟體)。
  • Flexbox布局透過將元素宣告display:flex或display:inline-flex啟動,讓元素成為彈性空間(flex container),彈性容器的子代元素就成為彈性項目(flex item)。
  • 一旦將原宿舍動為彈性內容,只會將子代設定為彈性元素,不影響後裔元素。
  • Flexbox設計本身沒有特定的方向。
  • Flexbox是為單一維度分布資訊版型所設計,若要使用二維排版功能,需要使用「網格排版」系統。

下一篇
Day2【主題一:Flexbox】_彈性容器(flex container)
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
CSScoke
iT邦新手 3 級 ‧ 2019-09-10 00:01:34

提醒一下有錯字
讓「源速」成為彈性空間
元素

我要留言

立即登入留言