2023年，w3c提出了一種新的方案----flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
使用css3屬性必然會存在瀏覽器相容性讓我們看看哪些瀏覽器支援flex
瀏覽器相容性
一 , flex布局是什麼？
flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為flex布局。
.box
行內元素也可以使用flex布局。
.box
webkit核心的瀏覽器，必須加上-webkit字首。
.box
注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
任何乙個容器都可以指定為flex布局。
二 , 基本概念
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做
main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
三、容器的屬性
以下6個屬性設定在容器上。
容器屬性
3.1 flex-direction屬性
3.2 flex-wrap屬性
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex屬性參考值
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
3.4 justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式。
3.5 align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
3.6 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
其他不太重要的屬性就不在羅列
:
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。1 2 335 36 37 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。38 示...
CSS3彈性布局flex
彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...