CSS3 Flexbox佈局教學：如何靈活佈置元素？

CSS3 Flexbox佈局教學：如何靈活佈置元素？

引言：
在網頁設計中，佈局是至關重要的一部分。一個強大的佈局工具是CSS3中的Flexbox佈局。 Flexbox佈局提供了一種簡單且靈活的方法，用於處理和排列網頁中的元素。本篇文章將介紹Flexbox佈局的基本原理和使用方法，並包含一些程式碼範例，幫助讀者更好地理解和應用Flexbox佈局。

一、Flexbox佈局的基本原理：
Flexbox佈局是一種彈性盒子模型，透過定義容器和容器內的元素的屬性，實現自適應和靈活的佈局。使用Flexbox佈局，我們可以輕鬆地對元素進行水平和垂直的對齊、分佈和排列。

Flexbox佈局的核心概念包括：容器（Container）、主軸（Main Axis）和交叉軸（Cross Axis）。容器是指透過設定display屬性為flex或inline-flex的元素。主軸是Flexbox佈局中的水平方向，交叉軸是Flexbox佈局中的垂直方向。

二、Flexbox佈局的基本屬性：
1.容器屬性：
（1）display：指定容器為flex佈局或inline-flex佈局。
（2）flex-direction：指定主軸的方向（row、row-reverse、column、column-reverse）。
（3）flex-wrap：指定是否允許元素換行（nowrap、wrap、wrap-reverse）。
（4）justify-content：指定元素在主軸上的對齊方式（flex-start、flex-end、center、space-between、space-around）。
（5）align-items：指定元素在交叉軸上的對齊方式（flex-start、flex-end、center、baseline、stretch）。

2.元素屬性：
（1）flex：指定元素的伸縮比例，決定元素在剩餘空間中所佔的比例。
（2）align-self：指定元素在交叉軸上的對齊方式（flex-start、flex-end、center、baseline、stretch）。

三、Flexbox佈局的實例程式碼範例：
以下是一些經典的Flexbox佈局實例程式碼範例，幫助讀者更能理解並應用Flexbox佈局。
（注意：以下程式碼應放在HTML檔案的