使用min-width解决Flex或Grid布局时容器被撑大的问题
2022/6/21 23:19:55
本文主要是介绍使用min-width解决Flex或Grid布局时容器被撑大的问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在使用Flex或Grid布局时,经常会遇到内容溢出容器或者将容器撑大的情况
例如在grid布局中元素尺寸为1fr,或者flex布局中元素flex-grow:1时,想使用Echarts画图和布局中的文本省略显示时发现并没有达到预期的效果,容器被内容撑大了
想要解决这个问题,首先需要知道容器为什么会被撑大。
我们知道块级元素默认宽度为容器的100%,除了自动得来的宽度之外,控制宽度的属性有width、min-width、max-width,实际操作会发现设置width也并不能解决我们说到的问题,这就关系到CSS中宽度属性的优先级:
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
min-width 的值会同时覆盖 max-width 和 width。
上面是MDN文档中对min-wdith的解释,可以看到设置宽度的属性当中min-width才是优先级最高的(更准确的说是min-width大于width和max-width时会覆盖width和max-width),也就是说我们设置width没起作用是因为width的值被min-width覆盖了。
了解这点之后,我们自然会想到那当前min-width的值是什么?继续查看文档可以看到:
auto
用于弹性元素的默认最小宽度。相比其他布局中以0为默认值,auto能为弹性布局指明更合理的默认表现。
在弹性元素中,min-width默认为auto,也就是内容所需要的宽度,所以弹性盒子自然被撑大了。
所以该类问题的解决方案便是:重设min-width = 0(或任何小于width的值),让width属性重新拿到元素宽度的控制权,因为width属性默认为内容区域的宽度,所以会自适应弹性盒子宽度,不会撑开容器。
高度也是同理,使用min-height:0解决
这篇关于使用min-width解决Flex或Grid布局时容器被撑大的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-29DataGrip使用ssh连接数据库的操作流程
- 2024-05-28SpringBoot3.2更新声明!
- 2024-05-28中外程序员到底有啥区别?
- 2024-05-25外企也半夜发布上线吗?
- 2024-05-24鸿蒙原生应用再新丁!芒果TV 入局鸿蒙
- 2024-05-22基本概念
- 2024-05-22检索数据
- 2024-05-22排序数据
- 2024-05-22基础过滤数据
- 2024-05-22通过逻辑操作符过滤数据