iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

HTML 與 CSS 學習筆記系列 第 14

Day14 - Flex (1) - 概述

Flex

flex items
from:https://www.w3.org/TR/css-flexbox-1/#property-index

  • Flex Box:是一個 (Box model),是指一個彈性的盒子 ( Flexible Box ),可以適應不同尺寸和設備,主要是響應式網頁的興起,因此愈來愈普及
  • 軸線的概念
    • 主軸 (main axis):左至右 (橫)
    • 交錯軸 (cross axis):上至下 (直)
  • 相關屬性
    • 外容器 (Container)
      • display:必備屬性
      • flex-flow
        • flex-direction:決定 flex 軸線
        • flex-wrap:決定換行的屬性
      • justify-content:主要軸線的對齊
      • align-items:交錯軸線的對齊
    • 內元件 (items)
      • flex
        • flex-grow:伸展比
        • flex-shrink:收縮比
        • flex-basis:絕對值
      • order:排序
      • align-self:單一物件的交錯軸對齊
  • 對齊方法
    • 可以置中、對齊、平均分配
    • 如果有用過簡報 (PPT) 上面的排版功能,呈現的效果很像

另一張圖
image alt
from:https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

VS Code 套件

  • 即時顯示修改效果,方便確認

參考資料

次回

來準備實作 Flex


上一篇
Day13 - HTML 與 CSS (4) - 水平置中、box-sizing
下一篇
Day15 - Flex (2) - 外容器、軸線
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言