dtcms模板 dtcms文档 分布式调度 express flash swagger Zeptojs 前端项目实战 css最后一个子元素 matlab颜色代码 maya曲线建模 python学习文档 java当前时间 java文件读写 java网络编程实例 计算机操作系统第四版 js数组删除指定元素 maxtoc4d blued是什么软件 视频加文字用什么软件 微信临时链接多久失效 pr书写效果 s10截屏 免费ftp空间 sql2008r2 android下载文件 古特里克的杀生刀 数据库建模工具 微信昵称特殊符号 脚本录制 迅捷屏幕录像工具 lol特效盒子 思源字体包 perl正则表达式 c语言小程序 javascript程序设计 影音盒子 2015刷手机端排名 cad虚线显示不出来 信安ca玛维的踪迹
当前位置: 首页 > 学习教程  > 编程语言

js弹性布局出现的问题小结

2020/12/28 18:34:42 文章标签:

今天在学习弹性布局给项目添加交叉轴属性align-items的时候出现了一个问题: 当容器的宽度小于项目的宽度的时候(默认设置容器的flex-flow:row wrap) 会出现两行元素之间出现空行的情况。 为项目设置align-items:center属性时 空行情况还存在 如果为项目设置align-co…

今天在学习弹性布局给项目添加交叉轴属性align-items的时候出现了一个问题:
当容器的宽度小于项目的宽度的时候(默认设置容器的flex-flow:row wrap)
会出现两行元素之间出现空行的情况。
为项目设置align-items:center属性时 空行情况还存在
如果为项目设置align-content:center属性时,空行情况会取消

align-items:center

在这里插入图片描述

align-content:center;在这里插入图片描述

小结:
由于弹性布局交叉轴对齐方式默认是stretch 会导致里面盒子内容出现空行的情况。
解决方法:
1.将父容器的高度进行改变(设置高度为两个盒子的高度 而不是比两个盒子高度叠加起来还高…)
2.为容器添加align-content:flex-start;


本文链接: http://www.dtmao.cc/news_show_550030.shtml

附件下载

上一篇:js中继承方法总结

下一篇:以后再来吃

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?