##從零開始，FLEX 給你無限創意空間，佈局自由伸展！

##為什麼要有這功能
CSS 的 flex 功能（Flexbox）是一種強大的佈局模型，它允許開發者以簡單且靈活的方式，垂直或水平排列元素，並自動調整元素的大小以填滿可用空間。它特別適合用於響應式設計中，因為它能夠根據不同裝置的屏幕大小，動態調整元素的排列方式。這對網頁設計至關重要，因可以避免繁瑣的手動佈局調整，讓頁面設計更為靈活和高效。

##核心結構
Flexbox 主要依賴父容器設置 display: flex;，子元素則會自動按 Flexbox 模型進行排列。以下是一些核心的 Flex 屬性：
display: flex;：定義一個彈性容器。
flex-direction：控制主軸的方向，可以是水平 (row) 或垂直 (column)。
justify-content：控制子項目在主軸上的對齊方式（例如：左對齊、居中、分散）。
align-items：控制子項目在交叉軸上的對齊方式（例如：頂部對齊、居中、底部對齊）。
flex-wrap：決定子項目是否應換行排列，適合內容較多時自動調整佈局。

##主要功能
自適應佈局：Flexbox 可以根據屏幕大小動態調整元素的排列方式，使網頁具備自適應性。
元素間距控制：透過 justify-content 和 align-items，可以輕鬆管理元素之間的間距和對齊。
彈性伸縮：子元素可以根據剩餘空間自動調整大小，確保佈局一致。
響應式設計簡化：Flexbox 簡化了多設備、不同解析度和螢幕尺寸的網頁設計。

##注意事項
1.兼容性問題：雖然大多數瀏覽器都支持 Flexbox，但在某些舊版瀏覽器中可能會有相容性問題，需要檢查或使用前綴(註一)。
2.學習曲線：雖然 Flexbox 提供了強大的佈局能力，但也需要一些學習時間來掌握其靈活性和應用方式。
3.性能問題：當 Flexbox 被大量使用在大型項目中時，可能會造成瀏覽器的性能下降。

簡單範例應用
.container {
display: flex;
justify-content: center;//讓內容在容器的水平方向上居中
align-items: center;//讓內容在容器的垂直方向上也居中。
height: 100vh;//元素高度等於視窗高度
//若父容器的高度已經設置了，且元素高度等於父容器的高度，可用 height: 100%;
}
.item {
flex: 1;//，讓每個子元素平均分配剩餘空間
padding: 10px;
background-color: lightblue;//容器背景色
}

註一：以下可確保 Flexbox 在不支持標準屬性的瀏覽器上依然能正確顯示。
.container {
display: -webkit-box; / 支持舊版 Safari 和 iOS /
display: -moz-box; / 支持舊版 Firefox /
display: -ms-flexbox; / 支持 Internet Explorer 10 /
display: -webkit-flex; / 支持舊版 Chrome 和 Safari /
display: flex; / 標準屬性 /*
}