flex-shrink的使用

最新推荐文章于 2025-03-18 13:54:17 发布
最新推荐文章于 2025-03-18 13:54:17 发布
阅读量406 收藏
点赞数
分类专栏： 工作 文章标签： f固定宽度 压缩 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35752802/article/details/100038249
版权
本文探讨了使用Flex布局时，右侧固定宽度元素显示异常的原因及解决办法。详细解析了flex-shrink属性的作用，并讨论了子元素内容超出父容器宽度导致的压缩现象。
摘要由CSDN通过智能技术生成

最近工作用到flex布局，左边自适应宽度flex-fill，右边固定宽度
但是发现右边显示的宽度比设置的小
原来他的宽度是被压缩了，加上flex-shrink：0就可以了
不过这个属性是在父容器空间不足时才会压缩，按道理来说我的这种情况并没有

查看了一些资料 发现原来右边盒子里面的文字会超出盒子宽度，因此设置了省略号显示，可能有可能造成子盒子宽度超过父容器的宽度而被压缩。

在网上还看到一种在自适应盒子显示省略号没有出来的问题，虽然我还没遇到过，解决办法参考
flex布局自适应宽度显示省略号问题

详解关于flex-shrink如何计算的冷知识
09-22
在Flex布局中，`flex-shrink`属性是一个关键的参数，用于控制元素在空间不足时缩小的比率。这篇文章将深入探讨`flex-shrink`的计算方法。 首先，我们要理解`flex-shrink`的基本概念。当容器的总宽度小于其所有子...
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
在实际应用中，`flex-shrink`可以与`flex-grow`和`flex-basis`结合使用，以实现更复杂的弹性布局。`flex-grow`控制在有多余空间时如何分配空间，`flex-basis`则设定flex item的基础大小。这三个属性共同构成了`flex`...
css flex布局 —— 项目属性 flex-shrink
且听风吟的博客
10-18 3万+
css flex布局 —— 项目属性 flex-shrink
Flexbox 布局中的 flex-grow、flex-shrink、flex-basis 和 flex 属性详解
罐装旺仔的博客院子
02-22 930
属性作用默认值示例值flex-grow定义项目的扩展比例012定义项目的收缩比例101flex-basis定义项目的初始大小auto200px50%flex简写形式，定义flex-grow和flex-basis0 1 auto11 1 autonone。
flex布局中flex-shrink的使用
weixin_44777146的博客
04-21 7312
<div style="width: 1000px;overflow: auto;display: flex;border: 1px solid black"> <div style="width: 500px;height: 100px;background-color: red;">1</div> <div style="width: 500px;height: 100px;background-color: green;">2</div
Flexible 弹性盒子模型之CSS flex-shrink 属性
zaixianshouce的博客
01-04 213
实例 让第二个元素收缩到其他元素的三分之一：   效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性           flex-shrink 29.021.0 ...
flex弹性布局教程-05项目属性flex-shrink
晴空闲云
09-21 2336
本篇介绍了 flex-shrink 属性，flow-grow 用于放大，那么 flex-shrink 就是缩小了，其缩小规则和 flex-grow 类似。 阅读时间约10~15分钟，文字虽多，但主要都是例子。
12-item-flex-shrink.html
10-09
另外，在使用flex-shrink时，需要理解其与flex-grow和flex-basis属性之间的相互作用。这三个属性共同定义了flex项目的flex属性，它们都作用于flex项的大小，控制着在分配主轴方向的空间时如何伸缩。具体来说，flex-...
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
热门推荐
m0_37058714的博客
06-21 8万+
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是   flex-basis  ，basis英文意思是&lt;主要成分&gt;，所以他和...
27-flex-grow，flex-shrink，flex-basis，flex复合写法，order，flex-wrap
qq_47462646的博客
12-06 428
2.flex-shrink：弹性元素的缩小比例，默认值为1，即如果空间不足，该项目将缩小。1.flex-grow：弹性元素的放大比例，默认值为0，即如果存在剩余空间，也不放大。3.flex- basis：弹性元素的占据空间，默认值为auto，即项目的本来大小。4.order:用整数值来定义排列顺序，数值小的排在前面，可以为负值。
css flex shrink,CSS3 flex-shrink属性用法详解
weixin_35862131的博客
08-04 758
下面本文章来给各位介绍一下CSS3 flex-shrink使用方法，希望例子能帮助到各位。flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，fle...
弹性盒子模型属性之flex-shrink
weixin_33670713的博客
10-24 191
上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。值为0,不缩小。 下面的例子中没有定义该属性，但是满足容器中空间不足的情况,项目会默认缩小。 当项目1,2,3,4,5的flex-grow比例改变为: ...
flex-shrink (适用于弹性盒模型容器子元素)
weixin_34413065的博客
06-01 202
设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。） 语法 flex-shrink: <number> (default 1) flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可...
关于css中的flex-shrink
lotpyve的博客
01-06 800
默认情况下，项目的flex-shrink值为1，表示项目可以缩小，且所有项目的缩小比例相等。如果一个项目的flex-shrink值为2，在CSS中，flex-shrink属性用于指定弹性容器中的项目在空间不足时如何收缩。它控制项目的缩小比例。而其他项目的值为1，则前者在空间不足时会缩小的比其他项目更多。可以复制以下代码自己实验一下。
CSS3 Flexbox中flex-shrink属性的用法
fghffrrfghffrr的专栏
12-29 1266
在CSS3 Flexbox中flex-shrink属性定义为: This  component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of t
flex-shrink:0
weixin_51725685的博客
03-02 2218
flex-shrink:0
【CSS基础】flex-shrink
Milk~每天分享一点点，技术进步一点点
08-31 3902
flex-shrink flex-shrink 属性指定了 flex 元素的收缩规则 含义及用法： flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。 flex-shrink用来干嘛呢？ 比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。超了怎么办？还有得救。
flex中的 flex-shrink flex-basis
最新发布
weixin_43791896的博客
03-18 96
在 CSS 中，flex-basis 的值必须包含单位（如 px、%、em 等），因此正确的写法是 350px。若直接写 350（无单位），浏览器会忽略该值，导致 flex-basis 回退到默认值 auto。flex-shrink 仅在空间不足时生效，flex-grow 在空间剩余时生效。flex-shrink:2 的收缩量是 flex-shrink:1 的两倍。若项目内容过宽（如图片），需设置 min-width: 0 强制允许收缩。flex-shrink 与 flex-grow 无关。
flex-shrink如何使用
09-07
flex-shrink 属性用于定义弹性盒子项目在空间不足时的缩小比例。 要使用 flex-shrink 属性，需要将元素的 display 属性设置为 flex 或 inline-flex，然后在元素的样式中添加 flex-shrink 属性。 flex-shrink 属性接受一个数字值作为参数，表示项目的缩小比例。默认值为 1。 例如，如果有三个项目的 flex-shrink 属性分别设置为 1、2 和 3，当空间不足时，第一个项目将缩小 1/6，第二个项目将缩小 2/6，第三个项目将缩小 3/6。 以下是一个使用 flex-shrink 属性的示例： ```html <div style="display: flex;"> <div style="flex-shrink: 1;">项目1</div> <div style="flex-shrink: 2;">项目2</div> <div style="flex-shrink: 3;">项目3</div> </div> ``` 在这个示例中，当空间不足时，每个项目将按照其 flex-shrink 属性的比例进行缩小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值