如何應用彈性布局，代碼如下：

 !DOCTYPE html  html  head  meta charset= UTF-8  meta name= viewport content= width=device-width, initial-scale=1.0  meta http-equiv= X-UA-Compatible content= ie=edge  title Document /title  style  margin: 0; padding: 0; div{ border: 1px solid #ccc; box-sizing: border-box; .box{ height:20vh;  display: flex;  .box div{  flex: 1;  .box div:last-child{ flex: 2; /style  /head  body  div  div Document1 /div  div Document2 /div  div Document3 /div  div Document4 /div  div Document5 /div  /div  /body  /html 

運行結果如下：

容器的設置

flex有6個屬性可以設置：

flex-direction:row(主軸由左向右，默認) / row-reverse（主軸由右向左） / column （主軸由上向下）/ column-reverse （主軸由下向上） 決定主軸的方向

flex-wrap:nowrap（默認，不換行） / wrap(換行) / wrap-reverse(換行，第一行在下方) 決定項目在一條軸線上排不下時的換行方式

flex-flow：是上面兩個屬性的簡寫模式 默認值：flex-flow：row nowrap。

justify-content：flex-start(默認值，左對齊) / flex-end（右對齊） / center（居中） / space-between（兩端對齊，項目之間的間隔相等） /
space-around（每個項目之間的間隔相等，所以項目之間的間隔比項目與邊框之間的價格大一倍）; 決定項目在主軸上的對齊方式。space-between/around在自適應調節間距時很有用

align-items：flex-start（交叉軸的起點對齊） / flex-end（交叉軸的終點對齊） / center（交叉軸的中點對齊） / baseline（項目的第一行文字的基線對齊）/stretch（默認值，若項目未設置高度或設置為auto，項目將占滿這整個容器的高度）。 定義項目在交叉軸上的對齊方式

align-content：flex-start（與交叉軸的起點對齊） / flex-end（與交叉軸的終點對齊） / center（與交叉軸的中點對齊） /
space-between（與交叉軸的兩端對齊，軸線之間的間隔平均分布） /space-around（每跟軸線兩側的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍）
/ stretch（默認值，軸線占滿整個交叉軸）。定義多根軸線的對齊方式，如果項目自有一根軸線，該屬性不起作用

項目的屬性設置

order：定義項目的排列順序，數字越小，排列越靠前，默認為0.

flex-grow：定義項目的放大比例，默認為0，默認情況下即使有剩余空間項目也不會放大。縮放的方向為flex-direction的方向。

flex-shrink：定義項目的縮小比例，默認為1，空間不足時，該項目會縮小。其值為0表示不縮小.縮放的方向為flex-direction的方向。

flex-basis：定義了在分配多余空間之前，項目占據的主軸空間（main size），瀏覽器根據這個屬性沒計算主軸是否有多余空間，默認值為 auto，即項目的本來大小。flex-basis：80px；寬度（方向為row）設置為80px；

flex：是上面三個屬性的簡寫，默認值為 0 1 auto.有兩個快捷值：auto（1 1 auto）和none（0 0 auto）

align-self：該屬性允許耽擱項目與其他項目不同的對齊方式，課覆蓋align-items的屬性值。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則為stretch。

align-self：auto / flex-start / flex-end / center /baseline /stretch flex-basis:值為0與auto（默認）時的區別：前者沒有將整個項目進行計算，而后者則是忽略內容進行算的，所以如果布局是需要的是每個項目的百分比配置，則應當將flex-basis設置為0.

相關推薦：

HTML中彈性布局（Flex）的介紹（附代碼）

以上就是彈性布局是什么？彈性布局flex的基本應用（附代碼）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。