HTMl弹性布局

武飞扬头像

前端小芙

2024-04-24 帮助1人

弹性布局

1.目的

让父级有能力改变子级的宽和高，以填满空间
布局与方向无关
适合小规模布局

2.属性

display:flex/inline-flex

适用于父类元素
flex：父级占满全屏
inline-flex：父级的宽度由子级撑开

flex-direction

写在父级，作用在子集
检索子集在盒子中的位置，可以理解为排列顺序
取值

值	含义
row	横向
row-reverse	反横向
column	纵向
column-reverse	反纵向

flex-wrap

写在父级，作用在子级
检索子集是否超出父级

值	含义
nowrap	不换行
wrap	换行
wrap-reverse	反转wrap排列

flex-flow

符合属性
写在父级，作用于子级
flex-flow：排列方式换行

justify-content

检索弹性盒子在X轴上的对齐方式
写在父级，作用于子级

值	含义
flex-start	左对齐
flex-end	右对齐
center	居中
space-around	两端居中对齐
space-between	等间分布

align-items

检索弹性盒子在Y轴上的对齐方式
写在父级，作用于子级

值	含义
flex-start	置顶
flex-end	置地
center	垂直居中
baseline	与文本基线对齐
stretch	置顶置地

align-content

检索多行在Y轴上的对齐方式
写在父级，作用于子级

值	含义
flex-start	左对齐
flex-end	右对齐
center	居中
space-around	纵向平分空间，各行居中显示
space-between	上下置顶置地，中间居中
stretch	纵向平分空间，各行以最大方式显示

order

排列方式
写在子级
值为阿拉伯数字
值越小，排位越靠前

flex-flow

分配剩余空间
写在子级
值为阿拉伯数字
值越大，分配空间越多

flex-shrink

超效前提，子级宽度大于父级宽度
起效后，三者按比例分配父级的宽度
写在子级
默认为1

flex-basis

定义宽度占父级的多少
有问题，大于时的具体的压缩比例还没搞清楚

order

排列方式
写在子级
值为阿拉伯数字
值越大，分配空间越多

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgfffce

系列文章

同类精品