您现在的位置:首页 > >

HTML中的flex布局

发布时间:

flex布局也就是常说的弹性布局(个人觉得应用的比较广泛,常用于移动端布局)。当一个元素的父容器设置display:flex的时候,这个容器就会变成一个弹性盒子,默认情况下这个盒子里的子元素都会左右排列(宽度有内容决定,高度由父容器决定),当你给子元素设置高度并且高度超过父容器的高度的时候,他也不会溢出(会自动收缩),因为弹性的优先级大于自身固定大小。(但是当你给父容器最小宽高的时候,你的子元素还多,并且没设置折行,那么在手机上就会出现溢出现象。个人感觉不是很重要)


flex布局目前学到的添加在父容器上的语法

(主轴与侧轴排列方向)(个人感觉弄清主轴和侧轴比较重要)(默认情况下主轴侧轴是按下面图片所示) flex-direction:布局的排列方向(默认主轴排列方向)
????????row:显示为行(默认值)。方向为当前文档水*流方向,默认情况下从左到右排列
????????row-reverse:显示为行,但方向与row属性值相反
????????column:显示为列(主轴侧轴换位置)
????????column-reverse:显示为列,但方向与column属性值相反
flex-wrap:是否折行
????????nowrap:不折行(默认值)
????????wrap:折行处理
????????wrap-reverse:反向折行
justify-content:主轴方向上的子项对齐和分布方式
????????flex-start:子项都去起始位置对齐
????????flex-end:子项都去结束位置对齐
????????center:子项都去中心位置对齐
????????space-between:两端对齐,多余的空白区域在中间*均分配
????????space-around:环绕,每个子项两侧都环绕互不干扰的等距空白,视觉上边缘的两侧空白只有中间空白的一半
????????space-evenly:匀称、*等,视觉上每个子项两侧空白间距完全相等
效果展示

align-items:当子项只有一行时,每一行中子元素的上下对齐方式(最好是只写一行)
????????flex-start / flex-end / center(同上)
align-content:当子项多行时,侧轴的对齐方式
????????默认下有几行就会把容器划分为几部分(默认拉伸)
????????flex-start / flex-end / center / space-between / space-around / space-evenly (同上)


目前学到的添加在子容器上的语法:

order:排序 数值大的在后面
felx-grow:扩展(想要看到扩展的效果必须要有空隙)
????????0:不去扩展(默认值)
????????1:扩展(把间隙占满)
????????(补充:子元素会按照设置的比例来分配空隙,如果比例值总和小于1,那么还会有空隙;如果比例值总和大于1,将不会有空隙但也不会溢出,会收缩)
flex-shrink:收缩
????????1:会收缩(默认值)
????????0:不收缩
????????(补充: 当给的比例值小于1时会收缩的小一些,当比例值大于1时会收缩的大一些)
flex-basis:给子项设置一个具体的值
align-self:单独一个子项的上下对齐方式
????????flex-start / flex-end / center


flex会常用于移动端布局,所以这些属性需要记一下,以免自己写的时候记不住还要翻笔记!!!



????????????????????????????????????????????????????????????????????????????????来自正在逆战班学*的自己



??????????????????????????????????????????????????????????????????????????????????????????????????????致未来的自己


热文推荐
猜你喜欢
友情链接: