HTML / CSS 佈局流程詳細說明

layout.md

HTML / CSS 佈局流程詳細說明

類型	定義	常見用途	常用屬性	使用限制 / 注意事項	範例語法
Normal Flow（正常流）	預設排列，元素依序從上到下、左到右排列（block 換行、inline 不換行）	段落、文章、基本排版	display: block / inline / inline-block margin, padding	預設排列方式，較難做左右並排	<p>Hello</p><span>World</span>
Float Flow（浮動流）	使元素脫離正常流，漂浮到左/右邊，其它元素繞過它	圖文混排、舊式左右欄佈局	float: left / right clear, overflow（解浮動）	脫離文流，容易影響其他元素排版，需要清除浮動	img { float: left; } div::after { clear: both; }
Positioned Flow（定位流）	脫離文流，根據指定位置（top/right/bottom/left）擺放	彈出視窗、對話框、貼齊右上角元素、懸浮按鈕	position: absolute / relative / fixed / sticky top, left, z-index	absolute 依賴最近 relative 父元素定位；fixed 固定在螢幕	.box { position: absolute; top: 10px; left: 20px; }
Flex Flow（彈性流）	改變排列邏輯，讓子元素彈性排列於一維方向	水平導覽列、按鈕列、居中排版	display: flex flex-direction, justify-content, align-items, gap	排列為一維（單行或單列），不適合複雜網格	.container { display: flex; justify-content: space-between; }
Grid Flow（網格流）	將內容安排在二維的網格中（行＋列）	儀表板、圖片牆、雜誌排版、多欄文章	display: grid grid-template-columns, grid-template-rows, gap grid-area, grid-column, grid-row	需事先設計行列規則，適合結構清晰的排版	.grid { display: grid; grid-template-columns: 1fr 2fr; }

🔧 Flex Flow 常用屬性介紹

📁 容器屬性（父層）

屬性名稱	用途說明	常見值	範例
display	啟用彈性盒模型	flex, inline-flex	.container { display: flex; }
flex-direction	主軸方向（排列方向）	row（預設：橫向） row-reverse column（縱向） column-reverse	.container { flex-direction: row; }
flex-wrap	是否允許換行	nowrap（預設） wrap wrap-reverse	.container { flex-wrap: wrap; }
justify-content	主軸對齊（橫向排列時：左右）	flex-start（預設） center flex-end space-between space-around space-evenly	.container { justify-content: center; }
align-items	交叉軸對齊（橫向排列時：上下）	stretch（預設） flex-start center flex-end baseline	.container { align-items: center; }
align-content	多行交叉軸對齊（需要多行時）	同 align-items 的選項	.container { align-content: space-between; }
gap	子元素間距（空隙）	數值單位（如 10px）	.container { gap: 16px; }

---

📦 子項目屬性（子元素）

屬性名稱	用途說明	常見值	範例
flex-grow	剩餘空間如何分配	整數（0 = 不放大，1 = 可放大）	.item { flex-grow: 1; }
flex-shrink	空間不足時如何縮小	整數（0 = 不縮小）	.item { flex-shrink: 1; }
flex-basis	初始主軸尺寸	auto, 100px, 30% 等	.item { flex-basis: 200px; }
flex	縮寫：grow shrink basis	例如 flex: 1 0 100px; 常見簡寫：flex: 1;	.item { flex: 1; }
align-self	覆寫父容器的 align-items 設定	同 align-items 的選項	.item { align-self: flex-end; }
order	控制項目順序	整數（數字越小越優先）	.item { order: 2; }

---

🔧 Grid Flow 常用屬性介紹

📁 容器屬性（父層）

屬性名稱	用途說明	常見值	範例
display	啟用網格模型	grid, inline-grid	.container { display: grid; }
grid-template-columns	定義欄數與寬度	repeat(3, 1fr), 100px 200px, auto	.container { grid-template-columns: 1fr 2fr; }
grid-template-rows	定義列數與高度	repeat(2, auto), 100px 1fr	.container { grid-template-rows: 100px auto; }
grid-template-areas	定義區域名稱與布局	"header header" "sidebar main"	.container { grid-template-areas: "nav nav" "side main"; }
grid-auto-flow	自動放置方向	row（預設）, column, dense	.container { grid-auto-flow: row; }
grid-auto-rows	自動列高	100px, auto	.container { grid-auto-rows: 150px; }
grid-auto-columns	自動欄寬	1fr, 100px	.container { grid-auto-columns: 1fr; }
gap	子項目間距（總稱）	10px, 1rem, row-gap column-gap	.container { gap: 20px; }
row-gap	行距	10px, 2em	.container { row-gap: 10px; }
column-gap	欄距	10px, 2em	.container { column-gap: 10px; }

---

📦 子項目屬性（子元素）

屬性名稱	用途說明	常見值	範例
grid-column	欄位範圍（開始 / 結束）	1 / 3, span 2	.item { grid-column: 1 / 3; }
grid-row	列範圍（開始 / 結束）	2 / 4, span 1	.item { grid-row: 2 / 4; }
grid-area	放置到指定區域	區域名稱或 row-start / column-start / row-end / column-end	.item { grid-area: main; }
justify-self	水平對齊	start, center, end, stretch	.item { justify-self: center; }
align-self	垂直對齊	同上	.item { align-self: end; }
place-self	縮寫：align + justify	center stretch 等	.item { place-self: center; }

---

🆚 Flex vs Grid 比較

特性	Flex	Grid
對齊方式	一維（單軸）	二維（欄＋列）
適用場景	排列元素（工具列、按鈕列）	版面架構（頁面、區塊）
調整方式	由內容推動結構	由結構推動內容
控制細緻度	中等	高（能精準定義每格）