2023年，w3c提出了一種新的方案–flex布局，可以簡便、完整、響應式地實現各種頁面布局。以下是瀏覽器的支援情況：
更多相容請參考 可以查詢到更多瀏覽器對html5的支援情況。
flex是flexible box的縮寫，翻譯成中文就是「彈性盒子」，用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。
.box
當然，行內元素也可以使用flex布局。
.box
採用flex布局的元素，被稱為flex容器(flex container)，簡稱「容器」。其所有子元素自動成為容器成員，成為flex專案(flex item)，簡稱「專案」。
彈性盒模型的結構示意圖。
容器預設存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，預設專案按主軸排列。
main start/main end：主軸開始位置/結束位置；
cross start/cross end：交叉軸開始位置/結束位置；
main size/cross size：單個專案佔據主軸/交叉軸的空間；
簡單理解，當我們父容器設定了flex布局後，子元素水平排列，這時主軸為x軸 。
align-content屬性：定義多根軸線的對齊方式
注:如果專案只有一根軸線，該屬性不起作用。
所以，容器必須設定flex-wrap：···；
.box
設定在專案上的屬性也有6個。
order屬性：定義專案的排列順序。
數值越小，排列越靠前，預設為0，可以是負值。
flex-grow屬性：定義專案的放大比例
預設值為0，即如果空間有剩餘，也不放大。
可以是小數，按比例佔據剩餘空間。
若所有專案的flex-grow的數值都相同，則等分剩餘空間
若果有乙個專案flex-grow為2，其餘都為1，則該專案佔據剩餘空間是其餘的2倍
flex-shrink屬性：定義專案的縮小比例
預設值都為1，即如果空間不足將等比例縮小。
如果有乙個專案的值為0，其他專案為1，當空間不足時，該專案不縮小。
負值對該屬性無效，容器不應該設定flex-wrap。設定flex-shrink為0的專案不縮小
如果所有專案都為0，則當空間不足時，專案撐破容器而溢位。專案不縮小
如果設定專案的flex-shrink不為0的非負數效果同設定為1。
flex-basis屬性：定義在分配多餘空間之前，專案佔據的主軸空間。
預設值為auto，瀏覽器根據此屬性檢查主軸是否有多餘空間。
.item
注意設定的flex-basis是分配多餘空間之前專案佔據的主軸空間，如果空間不足則預設情況下該專案也會縮小。設定flex-basis為350px，但空間充足
那麼當空間不足時，專案縮小，會小於設定值。
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫
預設值為0 1 auto，第乙個屬性必須，後兩個屬性可選。
.item
align-self屬性：允許單個專案與其他專案有不一樣的對齊方式
預設值為auto，表示繼承父元素的align-items屬性，並可以覆蓋align-items屬性。
.item
注：本文素材來自青春時光
Flex 布局教程 彈性布局
一 容器指定flex布局 box display flex 塊級元素設定 box display inline flex 行內元素設定 box display webkit flex webkit核心 display flex 二 容器的屬性 1 flex direction 決定主軸的方向，即專案...
Flex（彈性布局） 布局教程 語法篇
容器的屬性 flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為...
flexbox彈性盒子布局教程（一）
在開始學習flexbox之前，你需要以下基礎知識 在相當一段長的時間裡，唯一具有瀏覽器相容性的頁面布局方法就是float 浮動 和position 絕對定位與相對定位 即便他們可以比較好的處理也頁面布局，但在一些情況使用他們是十分困難的，如 一項新技術最大的問題是它的相容性，下面的flexbox的相...