Flexbox - 概述

Cascading Style Sheets (CSS) 是一種簡單的設計語言，旨在簡化網頁排版過程。CSS 負責網頁的視覺效果。

使用 CSS，您可以控制文字顏色、字型樣式、段落間距、列大小和佈局、使用的背景影像或顏色、佈局設計、不同裝置和螢幕尺寸的顯示變化以及各種其他效果。

為了確定 CSS 中盒子（元素）的位置和尺寸，您可以使用以下一種可用的佈局模式：

• 塊級佈局 - 此模式用於文件佈局。

• 內聯佈局 - 此模式用於文字佈局。

• 表格佈局 - 此模式用於表格佈局。

• 表格佈局 - 此模式用於元素定位。

所有這些模式都用於對齊文件、文字、表格等特定元素，但是，這些模式都不能提供完整的解決方案來佈局複雜的網站。最初，這通常是使用浮動元素、定位元素和表格佈局的組合來完成的。但是浮動只允許水平定位盒子。

什麼是 Flexbox？

除了上述模式之外，CSS3 還提供另一種佈局模式：彈性盒子，通常稱為Flexbox。

使用此模式，您可以輕鬆建立複雜應用程式和網頁的佈局。與浮動不同，Flexbox 佈局可以完全控制盒子的方向、對齊方式、順序和大小。

Flexbox 的特性

以下是 Flexbox 佈局的顯著特性：

• 方向 - 您可以將網頁上的專案排列在任何方向，例如從左到右、從右到左、從上到下和從下到上。

• 順序 - 使用 Flexbox，您可以重新排列網頁內容的順序。

• 換行 - 如果網頁內容的空間不足（單行），您可以將其換行到多行（水平和垂直）。

• 對齊 - 使用 Flexbox，您可以相對於其容器對齊網頁內容。

• 調整大小 - 使用 Flexbox，您可以增加或減小頁面中專案的大小以適應可用空間。

支援的瀏覽器

以下是支援 Flexbox 的瀏覽器：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+
• Android 4.4+
• iOS 7.1+