Display、Flexbox 與 Grid

CSS 的排版系統決定元素怎麼排列。每張卡片展示一個屬性,各自獨立互動。

HTML 基礎

.block vs inline

HTML 元素天生就分兩種:Block 獨佔一行,Inline 隨文字排列。CSS display 可以覆蓋這個預設。

Block 元素 — 每個都獨佔一行
我是 <div>
我是 <p>
我是 <h3>
Inline 元素 — 全部排在同一行
文字裡面有 <span> <a> <strong> <em> <code>,它們都跟文字混在一起。
<!-- Block 元素:預設 display: block -->
<div> <p> <h1>~<h6> <ul> <section>
<!-- Inline 元素:預設 display: inline -->
<span> <a> <strong> <em> <code>
DISPLAY

.block

每個元素獨佔一行,由上往下堆疊。

📱
iPhone
💻
MacBook
📋
iPad
display: block;
divph1~h6獨佔一行
DISPLAY

.inline-block

並排顯示,而且可以設定寬高。拖動滑桿試試:

📱
iPhone
💻
MacBook
📋
iPad
display: inline-block;
width: 90px;
height: 80px;
可設寬高並排按鈕常用
DISPLAY

.inline

像文字一樣排列,寬高設了也沒用。拖動滑桿看看:

📱 iPhone💻 MacBook📋 iPad
不管怎麼拖,大小都不會變
display: inline;
width: 90px; /* 無效 */
height: 80px; /* 無效 */
spanastrong無法設寬高
DISPLAY

.none

元素完全消失,不佔任何空間。

📱
iPhone
💻
MacBook
📋
iPad
display: none;
完全隱藏不佔空間
FLEXBOX

.flex-direction

決定主軸方向:橫排或直排。

📱
iPhone
💻
MacBook
📋
iPad
display: flex;
flex-direction: row;
→ 橫排
FLEXBOX

.justify-content

控制主軸方向上的對齊和分配。

📱
iPhone
💻
MacBook
📋
iPad
display: flex;
justify-content: center;
center
FLEXBOX

.align-items

控制交叉軸方向上的對齊。

📱
iPhone
💻
MacBook
📋
iPad
display: flex;
align-items: center;
center
FLEXBOX

.flex-wrap & gap

控制是否換行,以及元素之間的間距。

📱
iPhone
💻
MacBook
📋
iPad
Watch
🎧
AirPods
display: flex;
flex-wrap: wrap;
gap: 12px;
可換行間距 12px
CSS GRID

.grid-template-columns

同時控制行和列的二維佈局,適合產品列表和 Dashboard。

📱
iPhone
💻
MacBook
📋
iPad
Watch
🎧
AirPods
🥽
Vision Pro
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
3 欄間距 12px

小結

  • - HTML 元素天生分 Block(獨佔一行)和 Inline(隨文字流),CSS display 可以覆蓋
  • - inline-block:並排又可設寬高,inline:並排但無法設寬高
  • - Flexbox:一維排列,direction 控制方向、justify 控制主軸、align 控制交叉軸
  • - Grid:二維佈局,用 grid-template-columns 定義欄數
  • - 跟 AI 溝通時,「justify-content: space-between」比「排整齊」精確