首页 前端知识 flex 布局子元素被挤压的问题

flex 布局子元素被挤压的问题

2024-05-03 18:05:04 前端知识 前端哥 29 988 我要收藏

在日常开发中,我们经常使用flex,Flex 意为 “弹性布局”,是一种在开发静态页面过程中常用的布局模式。如果我们在三栏布局中使用flex布局,中间一栏没有使用flex:1,右边的栏总会被挤压,如图
在这里插入图片描述
解决方法很简单, 就是使用flex-shrink属性;
flex-shrink 属性定义了项目的缩小比例,默认为1。
即如果空间不足,该项目将缩小,它还有另外一个值,就是0。

如果在子元素的css样式中添加flex-shrink属性,
然后把值改为 0:flex-shrink:0 。
那么当前元素就不会被其他子元素挤压。

在这里插入图片描述
在最右边的一栏加上这个属性就行flex-shrink:0 。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6785.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!