引言

HTML 學習一 - 基礎: https://blog.yexca.net/archives/146
HTML 學習二 - 列表、表格與表單: https://blog.yexca.net/archives/150
HTML 學習三 - 網頁佈局: https://blog.yexca.net/archives/195

標準流也稱為文件流，指的是標籤在頁面中預設的排列規則，例如：區塊元素獨佔一行，行內元素可以一行顯示多個

若不依標準流佈局可使用浮動或 Flex 佈局

浮動

作用：使區塊元素水平排列，屬性名稱 float，屬性值有兩個：left 和 right

加上浮動的盒子將脫離標準流

清除浮動影響

因為浮動元素會脫離標準流，如果父層沒有高度，自己將無法撐開父層高度，可能導致頁面佈局錯亂

清除浮動常用四種方法

額外標籤法

在父層元素的最後添加一個區塊級元素，設定 CSS 屬性 clear:both

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style>
    .clearfix {
        clear: both;
    }
</style>

<div>
    <div></div>
    <div class="clearfix"></div>
</div>

單偽元素法

原理同上

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style>
	.clearfix::after {
    	content: "";
    	display: block;
    	clear: both;
	}
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

雙偽元素法

此方法可同時解決塌陷問題與浮動影響

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<style>
	.clearfix::before, /* 解決塌陷問題 */
	.clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after { /* 解決浮動問題 */
        clear: both;
    }
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

overflow

在父層元素添加 CSS 屬性 overflow: hidden;

Flex

Flex 佈局也稱為彈性佈局，是瀏覽器提倡的佈局模型，非常適合結構化佈局，提供了強大的空間分佈與對齊能力

而且 Flex 模型不會產生浮動佈局中的脫離標準流現象，佈局網頁更簡單、更靈活

組成

Flex 有四個組成部分

• 彈性容器
• 彈性盒子
• 主軸：預設在水平方向
• 側軸/交叉軸：預設在垂直方向

給父層元素設定 display: flex; 將變成彈性容器，子元素變為彈性盒子，可以自動擠壓或拉伸

Flex 佈局

主軸對齊方式

屬性名稱：justify-content

側軸對齊方式

屬性名稱

• align-items: 當前彈性容器內所有彈性盒子的側軸對齊方式 (設定給彈性容器)
• align-self: 單獨控制某個彈性盒子的側軸對齊方式 (設定給彈性盒子)

修改主軸方向

主軸預設在水平方向，側軸預設在垂直方向

屬性名稱：flex-direction

彈性伸縮比

作用：控制彈性盒子在主軸方向的尺寸。屬性名稱：flex，在子層 (彈性盒子) 添加

屬性值：整數數字，表示佔用父層剩餘尺寸的份數

彈性盒子換行

彈性盒子可以自動擠壓或拉伸，預設情況下，所有彈性盒子都在一行顯示。屬性名稱：flex-wrap，在父層 (彈性容器) 添加

屬性值有 wrap (換行) 和 nowrap (不換行，預設)

行對齊方式

屬性名稱：align-content

屬性值與主軸對齊方式相同，只對多行彈性盒子生效