所以今天我們來談談最新的 flex布局，也叫彈性布局！

flex容器分為x軸與y軸，x軸正方向默認從左至右，y軸正方向默認從上到下。

定義一個容器為彈性布局display:flex;主軸默認方向為左到右；

如果我們想去改變flex的默認方向，就需要用到flex-direction屬性flex-direction有四個屬性值，分別是row、row-reverse、column、column-reverse，分別為從左到右、從右到左、從上到下、從下到上！

justify-content:flex-start則主軸為左對齊justify-content:flex-end 則主軸為右對齊justify-content:center 則主軸為居中justify-content:space-between則每個子項目之間等距離，前提是有剩余空間justify-content:space-around則每個子項目會平分剩余空間，子項目與父元素邊界處也會存在距離

align-item:flex-start縱向從上到下align-item:flex-end縱向從下到上align-item:center縱向居中對齊align-item:baseline以基線對齊align-item:strech這是默認方式

flex-wrap:wrap超出父元素會換行flex-wrap:wrap-reverse反向換行flex-wrap:no wrap這是默認方式,不換行

align-content:flex-start上對齊align-content:flex-end下對齊align-content:center上下居中align-content:space-betweenalign-content:space-around

order:0,定義子項目的排序位置，數(shù)值越小越靠前，默認為0flex-grow:0;定義子項目的放大比例，默認為0不放大flex-shrink:1;定義子項目的縮小比例，默認為1，空間不足將等比縮小，0則不縮小，負值無效flex-basis:1;定義子項目占據(jù)空間，默認為auto，可以設置百分比，也可以是固定值

以上三種屬性可以簡寫，比如flex：1,1,1順序如上

如有錯誤，歡迎大家指正，一起努力吧！

以上就是html最新的flex布局的理解 的詳細內(nèi)容，html教程

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