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」比「排整齊」精確
下一課