CSS 程式札記 : Flexbox 彈性盒子

本文將介紹 CSS Flexbox，CSS Flexbox 是網頁設計的佈局工具，Flexbox 能使元素的排列和對齊變得更加靈活和直觀，從而大大簡化了響應式網頁設計的過程，通過了解 Flexbox 的概念和屬性，你將能夠利用Flexbox 創建靈活且響應性強的網頁佈局。

Flexbox 概念

Flexbox 盒子模型具有水平起點(main start) 與 水平終點(main end) 、 垂直起點(cross start) 與 垂直終點(cross end)、水平軸與垂直軸，然後元素具有水平尺寸與垂直尺寸，這些屬性使 Flexbox 更具彈性。

Flexbox 屬性

1. display

對於 Flexbox，它有兩種設定：「flex」和「inline-flex」。這兩種設定的主要區別在於元素後面是否需要換行。

2. flex-direction

這個屬性設定 Flexbox 內的元素的排列方向。它有四種設定：row（由左到右）、row-reverse（由右到左）、column（由上到下）和 `column-reverse`（由下到上）。

3. justify-content

這個屬性設定 Flexbox 內的元素的水平對齊位置。它有五種設定，包括 flex-start（對齊最左邊）、flex-end（對齊最右邊）、center（置中）、space-between（元素之間平均分配空間）和 space-around（每個元素的間距都相同）。

4. align-items

這個屬性設定 Flexbox 內的元素的垂直對齊位置。它有五種設定，包括 flex-start（對齊頂部）、flex-end（對齊底部）、center（置中）、stretch（元素撐滿整個高度）和 baseline（根據元素的基線對齊）。

5. align-content：

這個屬性用於設定 Flexbox 中多行元素的對齊方式。它有六種設定：flex-start（所有元素對齊容器頂部）、flex-end（所有元素對齊容器底部）、center（元素群組在容器中垂直置中）、space-between（元素間距平均分配，第一行元素貼齊頂部，最後一行貼齊底部）、space-around（每行元素上下都有相等空間）和 stretch（元素行被拉伸填滿容器高度）。

6. flex-wrap

這個屬性設定 Flexbox 內的元素是否需要換行。它有三種設定：nowrap（不換行）、wrap（換行）和 wrap-reverse（換行，但元素的順序反轉）。

7. order

這個屬性可以指定元素的排列順序。

8. flex

這個屬性是由三個子屬性組成的：flex-grow、flex-shrink 和 flex-basis。它們分別控制元素的伸展、壓縮和基本大小。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡