flex布局压缩

已于 2023-09-21 19:49:28 修改
阅读量227 收藏
点赞数
分类专栏： 前端框架类 文章标签： 前端
于 2023-09-21 19:49:14 首次发布

在这里插入图片描述
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值，就是0.

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

文章详细介绍

KAGHQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局遇到过的小问题
qiqi_77_的博客
03-01 6828
想要使用flex布局实现上面这种效果，html:<ul>     <li><span></span></li>     <li><img width="100%" src="https://dummyimage.com/400x400/f5a2a5/FFF&text=product-
flex布局简单总结
01-08
一、flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 注意 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须...
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
Flex布局基础知识
01-08
Flex布局 今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。 文章目录Flex布局Flex简介弹性容器弹性元素主轴与纵轴弹性容器样式弹性元素样式 > 本章节使用的基础代码(开启flex之前) .wrapper{ width: 800px; border: red solid 5px; } .box1,.box2,.box3{
flex布局下，盒子被挤压时如何解决
m0_70547044的博客
05-06 1605
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？
【CSS】解决flex布局下，子元素宽度超出父容器宽度后被压缩
weixin_42678675的博客
10-25 7052
1）实现子元素不压缩，超出宽度且在不显示滚动条的情况下能左右滚动 给每个子元素添加 flex-shrink: 0 父元素 overflow: auto 父元素伪类 father::-webkit-scrollbar { display : none } 2）代码 <div class="father"> <div class="son"></div> </div> <style> .father { width: 100%;
完美解决：flex布局中设置宽度被压缩的问题
热门推荐
web_ding的博客
03-17 2万+
问题描述： 在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩； 产生原因： 当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩 解决方法: 给固定宽度的元素添加flex-shrink:0 flex-shrink:0; TIPS： flex-shrink平时在使用过程中 比较少见，具体查看flex-shrink链接 ...
css中flex布局固定宽度盒子被压缩问题解决
weixin_44801790的博客
04-06 2489
css中flex布局固定宽度被压缩问题
flex布局导致图片被压缩
画画的贝贝的博客
04-07 286
flex布局导致图片被压缩 flex布局下的子元素flex-shrink(缩小值)默认为1,当父元素宽度小于子元素宽度的和时,该属性生效,所以为了防止图片被压缩可以设置其flex-shrink为0. .cancle{ width: 32rpx; height: 32rpx; margin-right: 16rpx; flex-shrink:0 } ...
flex布局下，图片会被压缩怎么办？
weixin_42790369的博客
06-26 390
为图片设置flex-shrink: 0;
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
flex布局实例DOM
01-15
参照阮一峰flex布局，以及实例DOM，做了部分修改，可以选择属性值看效果，方便理解
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 495
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 500
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 575
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
【JS实战案例汇总——不定时更新版】
微木
05-30 328
练习JS的实用案例，倒计时算法、定时轮播图
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 934
Web前端三大主流框架介绍：Angular、React、Vue
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 527
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
flex布局压缩子元素宽度
10-14
例如，设置一个容器为 flex 布局，子元素为三个 div 元素，分别设置宽度为 100px、200px、300px，当容器宽度为 400px 时，第一个子元素会被压缩为 80px，第二个子元素会被压缩为 160px，第三个子元素不会被压缩。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值