傳統布局方式基於盒模型，依賴display屬性+position屬性+float屬性。
由於傳統布局一些操作複雜，2023年w3c提出了flex布局，可以簡便、響應式的實現各種布局，並且能夠相容所有瀏覽器。
區別於傳統布局的「盒子」，在flex布局中稱為「flex容器」（flex container）。其所有的子元素自動稱為容器成員，稱為「flex專案」（flex item）。item分布結構按照正交的主軸（main axis）和交叉軸（cross axis）分布。主軸的方向和交叉軸的換行方向可以通過屬性設定，主軸和交叉軸的起始位置為main/cross start位置,結束位置（即箭頭方向）為main/cross end位置,item預設沿主軸方向從start位置向end位置（即箭頭方向）排列。單個item佔據的主軸空間和交叉軸空間為main size和cross size。
flex屬性包括容器（cintainer）屬性和專案（item）屬性
屬性值 ：column-reverse（由下到上，水平靠左）/ column（由上到下，水平靠左）/ row（由左到右，預設值，水平靠左）/ row-reverse（由右到左，水平靠右）
屬性值 ： nowrap（不換行）/ wrap（換行，第一行在上）/ wrap-reverse（換行，第一行在下）
屬性值 ：
（1）flex-start 向主軸起始方向對齊，如主軸從左向右則為左對齊
（2）flex-end 向主軸終點方向對齊，如主軸從左向右則為右對齊
（3）center 居中對齊
（4）space-betrween 兩端對齊（頭尾沒有間隔，中間間隔相同）
（5）space-around 中間間隔=頭/尾間隔的2倍
屬性值 ：
（1）flex-start 向交叉軸起始方向對齊，如交叉軸從上向下則為向上對齊
（2）flex-end 向交叉軸終點方向對齊，如交叉軸從上向下則為向下對齊
（3）center 中線對齊
（4）baseline 向第一行文字基線對齊
（5）stretch 若專案(item)沒設定高度或高度auto，則佔滿高度
屬性值 ：將每行看作主軸對齊中的乙個專案，對齊方式類同
（1）flex-start 向主軸起始方向對齊，如主軸從左向右則為左對齊
（2）flex-end 向主軸終點方向對齊，如主軸從左向右則為右對齊
（3）center 居中對齊
（4）space-betrween 兩端對齊（頭尾沒有間隔，中間間隔相同）
（5）space-around 中間間隔=頭/尾間隔的2倍
（6）stretch 若專案(item)沒設定高度或高度auto，則佔滿高度
若不為0，則按照比例分配剩餘空間
若為0，則空間不足時也不縮小。若不為0則按比例縮小
在分配多餘空間之前，專案佔主軸的空間，也可設定數字如100px。
其中grow必選，shrink和basis可選，有兩個快捷值如下
（1）auto代表（1，1，auto） （2）none 代表（0，0，auto）
屬性值 ：允許單個專案有自己的對齊方式
（1）flex-start 向交叉軸起始方向對齊，如交叉軸從上向下則為向上對齊
（2）flex-end 向交叉軸終點方向對齊，如交叉軸從上向下則為向下對齊
（3）center 中線對齊
（4）baseline 向第一行文字基線對齊
（5）stretch 若專案(item)沒設定高度或高度auto，則佔滿高度
web前端布局之flex布局
總的來說，flex布局的原理通過給父元素新增flex屬性，來控制子元素的位置和排列方式。採用flex布局的元素稱為flex容器。flex容器中存在兩條軸，分別為主軸和側軸，容器中的每個單元稱為flex專案。在容器上可以設定6個屬性 分別為 flex direction flex wrap flex ...
前端移動web 布局 flex布局
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性...
前端知識之flex布局2
當軸線超過一條時,flex容器把多條軸線當做元素對待,可以進行對齊 stretch 預設 當元素寬度沒有設定,軸線可以拉伸 flex start 向左對齊 flex end 向右對齊 center 居中對齊 space between 兩端對齊,元素之間空白等比切分 space around 軸線兩...