總結

本網頁教學如何使用 CSS 的 Flexbox 來創建網頁佈局，包括基本概念、屬性以及如何運用這些屬性來對元素進行排列和對齊。

摘要

網頁逐步介紹了 Flexbox 的基本概念，包括創建一個 Flex 容器和其內的子元素（項目），以及如何使用 display: flex; 來啟用 Flexbox 佈局。接著詳細解釋了主軸（main axis）和交叉軸（cross axis）的概念，並介紹了 flex-direction 屬性來控制主軸的方向。justify-content 屬性用於在主軸上對齊項目，而 align-items 屬性則用於在交叉軸上對齊項目。此外，還介紹了 flex-wrap 屬性來處理項目溢出時的換行問題，以及 align-content 屬性來對多行項目進行對齊。

網頁進一步解釋了 gap 屬性如何用於在項目之間添加空間，以及 Flex 項目的幾個屬性，包括 flex-grow、flex-shrink 和 flex-basis，這些屬性控制項目的增長、縮小和基礎尺寸。還提到了 flex 簡寫屬性，以及如何使用 align-self 來為個別項目覆蓋容器中的對齊方式。最後，介紹了 order 屬性，它允許改變項目在視覺上的排列順序，但指出這可能會影響 HTML 的語義和可訪問性。

觀點

• Flexbox 是一種 CSS 佈局模型，它提供了一種更加靈活和強大的方式來對元素進行排列和對齊。
• Flex 容器和其內的子元素（項目）是 Flexbox 的基礎。
• 主軸和交叉軸是理解 Flexbox 的關鍵概念，它們決定了項目的排列方向和對齊方式。
• flex-direction、justify-content 和 align-items 是控制項目排列和對齊的核心屬性。
• flex-wrap 屬性允許項目在不足空間時換行。
• align-content 屬性在項目換行時對多行進行對齊。
• gap 屬性用於在項目之間添加空間，使佈局更加整潔。
• flex-grow、flex-shrink 和 flex-basis 控制項目的尺寸變化。
• flex 簡寫屬性簡化了 Flex 項目的屬性設置。
• align-self 屬性允許個別項目覆蓋容器的對齊方式。
• order 屬性可以改變項目的視覺排列順序，但應謹慎使用，以免影響語義和可訪問性。

TIMELINEbeta

• [00:00:05] - [00:02:59]
  • 在 CSS 的石器時代，開發者使用浮動和定位來創建佈局，直到有一天，Flexbox 被引入，改變了世界。要使用 Flexbox，首先需要一個容器和一些子元素在 HTML 中。在 CSS 中，可以直接給容器設置 display: flex，這會創建兩個無形軸：主軸和交叉軸。預設情況下，主軸是水平的，子元素不再疊加在一起，而是沿著主軸排列。可以通過 flex-direction 屬性將主軸改為垂直。
  • justify-content 屬性用於沿主軸對齊元素，可用值包括 flex-start、flex-end、center、space-between、space-around 和 space-evenly。而 align-items 屬性用於沿交叉軸對齊元素，可用值包括 flex-start、flex-end、center 和 baseline。當 flex-direction 未定義時，預設主軸是水平的，交叉軸是垂直的。當設置 flex-direction: column 時，主軸變為垂直。
• [00:03:00] - [00:04:50]
  • 默認情況下，Flexbox 項目會試圖擠入一行。當添加更多項目時，可以使用 flex-wrap 屬性允許項目換行。當設置 flex-wrap: wrap 時，項目將在沒有更多空間時換行。當 flex-wrap 設置為 wrap 時，align-content 屬性可用來對齊所有行在交叉軸上，其可用值與 justify-content 類似。
  • 可以通過 gap 屬性在項目之間添加空隙。Flexbox 的屬性主要應用於容器，但也有一些屬性適用於容器的直接子元素，例如 flex-grow、flex-shrink 和 flex-basis。
• [00:04:51] - [00:06:46]
  • flex-grow 允許項目在有足夠空間時增長，它接受一個無單位的值，表示比例。flex-shrink 定義了項目在空間不足時縮小的速度。flex-basis 定義了項目在分配剩餘空間之前的大小。通常建議使用 flex 簡寫屬性，它結合了 flex-grow、flex-shrink 和 flex-basis，其中後兩個參數是可選的。
  • align-self 屬性允許單個項目覆蓋容器中設置的 align-items 值。order 屬性可以改變項目在視覺上的排列順序，但應謹慎使用，以免影響 HTML 的語義和可訪問性。
• [00:06:47] - [00:08:17]
  • 如果你喜歡這個視頻或者學到了東西，請考慮點讚和訂閱頻道。視頻中總結了 Flexbox 的所有關鍵屬性，包括 display: flex、flex-direction、justify-content、align-items、flex-wrap、align-content、flex-grow、flex-shrink、flex-basis、align-self 和 order。這些屬性可以幫助開發者更好地控制佈局，並且使得響應式設計變得更加容易。最後，提醒觀眾在使用 order 屬性時要注意，因為它可能會影響網頁的可訪問性。