Flex 布局教程

flex 布局教程：語法篇

flex 布局教程：例項篇

flex布局學習筆記

布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性，傳統布局在應對大型複雜的布局時缺乏靈活性，特別是在改變方向、改變大小、伸展、收縮等等方面。

2023年，w3c 提出了一種新的方案----flex 布局，可以簡便、完整、響應式地實現各種頁面布局。flex布局（彈性盒子布局）模組目標在於提供乙個更有效地布局、對齊方式，並且能夠使父元素在子元素的大小未知或動態變化情況下仍然能夠分配好子元素之間的間隙。

flex布局的主要思想是使父元素能夠調節子元素的高度、寬度和排布的順序，從而能夠最好地適應可用布局空間（能夠適應不同的裝置和不同大小的螢幕）。

flex布局是一套布局，主要作用於父子元素上，父元素稱之為flex container，子元素稱之為flex item.

在flex布局中，子元素要麼按照主軸也就是main axis（從main-start到main-end）排布，要麼按照交叉軸，也就是cross axis(從cross-start到cross-end)排布，基本規則如圖所示

下面介紹幾個概念：

(1). main axis:父元素的主軸是指子元素布局的主要方向軸。

(2). main-start|main-end: 分別表示主軸的開始和結束，子元素在父元素中會沿著主軸從main-start到main-end排布。

(3). main size: 子元素佔據主軸的長度大小。

(4). cross axis: 交叉軸，與主軸垂直。

(5). cross-start|cross-end: 分別表示交叉軸的開始和結束。子元素在交叉軸的排布從cross-start開始到cross-end。

(6). cross size: 子元素在交叉軸方向上的大小。