首页
视频
资源
登录
原
flex flex-gorw不等分的问题
1547
人阅读
2023/5/21 9:30
总访问:
93365
评论:
0
收藏:
0
手机
分类:
小技巧
# flex flex-gorw不等分的问题 今天在练习flex 栅格布局的时候, 明明设置了项目元素都是flex-gorw:1; 但是发现有个地方 ,因为div填充了内容 导致没有平分成功,如下图。 后面查资料发现(引用: https://my.oschina.net/pokdars/blog/3023900) 解决方案1: 大神的博客加上: width: 0; 就可以解决,但是不知道为啥要这样解决。 我是前端小白, 这个原因先放这 后面我还发现一个解决方案 解决方案2 : 就是在html,body 上加上width:100%,估计平分不成功的原因就是没有宽度的原因 ![](https://img.tnblog.net/arcimg/17607487550/2233e19d6cfe4681bf566b35423b9218.png) 源码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>栅格布局</title> <style> html, body { height: 100%; } .grid { display: flex; /* 设置网格之间的间隙 */ gap: 10px; /* 设置上下边距 */ margin-bottom: 10px; } .grid .cell { width: 0; flex-grow: 1; background-color: green; text-align: center; color: #fff; } </style> </head> <body> <div class="main"> <div class="grid"> <div class="cell">1/2</div> <div class="cell">1/2</div> </div> <div class="grid"> <div class="cell">1/3</div> <div class="cell">1/3</div> <div class="cell">1/3</div> </div> <div class="grid"> <div class="cell">1/4</div> <div class="cell">1/4</div> <div class="cell">1/4</div> <div class="cell">1/4</div> </div> <div class="grid"> <div class="cell">高度撑满,即使内容没有填满空间</div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </div> </div> </div> </body> </html> ``` 引用文章: [flex练习](https://juejin.cn/post/7211537759848300602#heading-4) [不平分解决方案](https://my.oschina.net/pokdars/blog/3023900)
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
瑾语
无论这个世界对你怎样,都请你一如既往的努力、勇敢、充满希望。
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
小技巧
5篇
Net
4篇
编程基础
2篇
golang
7篇
mq
2篇
概念
1篇
golang并发
0篇
面试经
0篇
go坑
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术