🔹display

╱🚧 under construction -> flow/writing direction

CSS ⟩ layout ⟩ display

• block：

  • 預設佔據所有寬度 (width = 100%)。

  • 但可設定 width, height。

  • 書寫方式預設為 writing-mode: horizontal-tb，水平方式、由上到下排版。 (tb 代表 top to bottom)，跟隨 flow direction 流動。

  • 元素前後各會插入一個跳行 (line break)。

• inline：

  • width, height 由它的內容 (content) 決定，不可設定。

  • 可以設定水平方向的 margin, padding。

  • 無法設定垂直方向的 margin-top, margin-bottom。

  • 跟隨 writing direction 流動。

• inline-block：

  • 排版方式像 inline 元素（由左至右、由上到下）。

  • 但像 block 元素可設定 width, height。

  • 內建 inline-block 元素：img, button, select, input, textarea。

• inline-flex：

  • 🚧

• grid：

  • 將元素變成一個容器 (container)，本身行為像 block 元素，但改變子元素的行為。

• flex：

  • 將元素變成一個容器 (container)，本身行為像 block 元素，但改變子元素的行為。

  • display: flex：子元素朝水平方向排版 (flow direction 從 vertical 變為 horizontal)

• none：

  • 將元素從畫面上移除，彷彿沒這個元素一樣。

An element that is floated is automatically display: block.

🔴 主題

• block

• inline

• inline-block

• inline-flex

🗺️ 圖表

⭐️ 重點

• block elements are like paragraphs, and inline elements are like words.

📗 參考

• Every Layout (2021)