html最新的flex佈局的理解

每當我們去進行前端頁面佈局時都會用到float、position、margin等一些屬性，這些屬性用起來略顯麻煩，並且瀏覽器去進行渲染時會大大消耗性能

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

要注意的是任何容器都可以指定為flex佈局，但是在flex佈局中float、clear、vertical-align都會失效。

主軸方向

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-between
align-content:space-around

以上皆是加入父元素身上的屬性

子項目的一些屬性

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

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

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

以上是html最新的flex佈局的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！