当前位置:Gxlcms > html代码 > html最新的flex布局的理解

html最新的flex布局的理解

时间:2021-07-01 10:21:17 帮助过:93人阅读

每当我们去进行前端页面布局时都会用到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布局的理解 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行