3、換行處理（響應式布局需要）
4、調整容器內專案間距
5、盒子模型所有屬性
網頁布局（layout）是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2023年，w3c提出了一種新的方案—-flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
其實，關於什麼是flex布局、flex布局的一些基本概念、容器的屬性和專案的屬性，大家在菜鳥教程的flex布局語法教程上都可以看到詳細的解釋，我就不一一說明了。大家在看完鏈結中的概念後，我再說說flex布局的一些注意點。
注意：一定要看懂flex布局的基本概念（容器、專案、主軸、交叉軸）後，在進行以下內容閱讀。
當我們需要容器內的元素按照百分比大小進行排列時，就需要對容器進行彈性處理。
"d-flex">
123
觀察到此時的子元素（專案）仍然是block元素，但是卻失去了block元素獨佔一行的特性。就像被乙個盒子包裹著，預設從左到右排列。
（1）預設佔滿整行的寫法（專案使用flex-grow屬性）
專案就是容器的子元素，現在我們希望裡面的div能夠以1：2：3的比例排列在同一行，並且佔滿整行。
.d-flex>div:first-child
.d-flex>div:nth-child(2)
.d-flex>div:last-child
（3）預設最多佔滿整行的寫法（專案使用width屬性）
.d-flex>div:first-child
.d-flex>div:nth-child(2)
.d-flex>div:last-child
但是如果我們試著讓專案總寬度超過100%，會發生什麼情況？
.d-flex>div:first-child
.d-flex>div:nth-child(2)
.d-flex>div:last-child
（1）設定容器換行（flex-wrap）
彈性盒子中的專案預設不換行，不論是使用flex-grow還是width，寬度只能佔容器的100%，但是在某些情況下（比如響應式處理），需要我們做換行處理。所以盒子模型給我們乙個flex-wrap屬性，用於設定換行的方式。
.d-flex
容器設定flex-wrap: wrap後，專案設定flex-grow屬性並不能導致換行，因為它預設容器寬度為所有專案寬度的總和。因此只能通過設定width屬性進行換行處理。
.d-flex>div:first-child
.d-flex>div:nth-child(2)
.d-flex>div:last-child
justify-content屬性定義了專案在主軸上的對齊方式。它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
space-evenly：每個專案兩側的間隔和專案之間的間隔都相等。
最經常使用的是space-between、space-around和space-evenly三個值。
（1）justify-content: space-around;時的間距例項
.d-flex
.d-flex>div
.d-flex>div:first-child
.d-flex>div:nth-child(2)
.d-flex>div:last-child
justify-content: space-between;時的間距
（3）justify-content: space-evenly;時的間距
（1）容器屬性
flex-direction：決定主軸的方向（即專案的排列方向）
flex-wrap：一條軸線排不下，如何換行
flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
justify-content：定義了專案在主軸上的對齊方式
align-items：定義專案在交叉軸上如何對齊
align-content：定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
（2）專案屬性
order：定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow：定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink：定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
flex：flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self：允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
flex布局 彈性盒子
1.display flex inline flex 子元素的float clear和vertical align屬性將失效。flex direction 主軸的方向即專案排列方向 預設row flex wrap 軸線排不下，如何換行 flex flow 預設值為row nowrap justify...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...