2023年，w3c提出了一種新的方案----flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為flex布局。
.box
行內元素也可以使用flex布局。
.box
webkit核心的瀏覽器，需要加上-webkit字首。
.box
注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
居左對齊、居右對齊、兩端對齊、居中對齊、頂端對齊、底部對齊，以及處理專案之間的空白和專案寬度、高度的伸縮
需要加上各個瀏覽器的私有字首，
即-webkit-、-moz-、-ms-、-o-等，下面的例子都省略了字首。
.container
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，
稱為flex專案（flex item），簡稱"專案"。
flex-direction屬性決定主軸的方向（即專案的排列方向）。
.box
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
（1）nowrap（預設）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下
方。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content屬性
justify-content屬性定義了專案在水平方向上的對齊方式。
align-items屬性
align-items屬性定義專案在垂直方向上如何對齊。
.box
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
align-self屬性
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item
flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.item
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
總結 Flex布局
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...
flex 布局總結
flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式，若只有一根軸，該屬性則不起作用 flex wrap 如何換行item 屬...
flex布局總結
以下6屬性設定在容器上 1.flex direction 決定主軸方向 2.flex warp 決定一排放不下，如何換行 3.flex flaw 1和2兩屬性的合併寫法 4.justify content 定義專案在主軸上的對齊方式 5.align items 定義專案在交叉軸的對齊方式 6.ali...