HTMl弹性布局
弹性布局
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
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01