flex-shrink的使用

最新推荐文章于 2024-01-06 21:52:25 发布
最新推荐文章于 2024-01-06 21:52:25 发布
阅读量342 收藏
点赞数
分类专栏： 工作 文章标签： f固定宽度 压缩 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35752802/article/details/100038249
版权

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

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

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

qq_35752802
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局的所有属性和应用场景（建议收藏）
贫僧法号依平
02-01 1191
定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论。设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在。不换行的时候，容器宽度有不够分的情况，弹性元素会根据。属性为0，其他项目都为1，则空间不足时，前者不缩小。弹性元素永远沿主轴排列，那么如果主轴排不下，通过。
css flex布局 —— 项目属性 flex-shrink
热门推荐
且听风吟的博客
10-18 2万+
css flex布局 —— 项目属性 flex-shrink
css3新弹窗flex-shrink
m0_63616567的博客
06-15 309
flex-shrink定义和用法;：1：弹性盒模型容器子元素：无。
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 1万+
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
关于css中的flex-shrink
最新发布
lotpyve的博客
01-06 397
默认情况下，项目的flex-shrink值为1，表示项目可以缩小，且所有项目的缩小比例相等。如果一个项目的flex-shrink值为2，在CSS中，flex-shrink属性用于指定弹性容器中的项目在空间不足时如何收缩。它控制项目的缩小比例。而其他项目的值为1，则前者在空间不足时会缩小的比其他项目更多。可以复制以下代码自己实验一下。
flex布局属性详解
trigger的博客
07-31 712
flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何快速记住这三个属性： 首先是flex-basis，basis英文意思是<主要成分&...
详解关于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`...
详解flex布局中flex-grow与flex-shrink的计算方式
11-21
在CSS的Flex布局中，`flex-grow`和`flex-shrink`是两个关键的属性，它们共同决定了弹性项目（flex items）如何根据可用空间进行扩展和收缩。理解这两个属性的计算方式对于创建响应式和动态的网页布局至关重要。 ...
深入理解css3中的flex-grow、flex-shrink、flex-basis （转）
weixin_33800593的博客
03-10 1911
转自：http://zhoon.github.io/css3/2014/08/23/flex.html 感谢他的整理 flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性：flex-grow、f...
flex-basis 的真正的使用方法以及flex-shrink计算方法
lmmxxoo的博客
10-16 1万+
flex-basis flex-basis 属性用于设置或检索弹性盒伸缩基准值。 属性值 可以是长度单位，也可以是百分比，百分比是按照父元素的width为标准。 默认值为 0，不是 auto，如果取值为 auto 的话，它的值就等于 flex-items 的 width（或者默认的大小，width没有设置的话）。 使用方法 配合 flex-wrap 一起使用，如果 flex-wrap 的值为 no...
display:flex;实战,flex-shrink的用法
wwwwwwxjjj的博客
04-21 362
flex-shrink的用法 页面要求自适应,搜索框的高度不是固定的,所以table的高度也就不能固定,table的高度随着搜索框的高度变化,页面不出现滚动条,纯css实现, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...
CSS3 Flexbox中flex-shrink属性的用法
fghffrrfghffrr的专栏
12-29 1226
在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计算公式
qq_37805832的博客
09-18 963
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ marg
flex布局可能碰到的坑1
ppx2017的博客
08-13 1万+
flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： 相关代码： &lt;view class='hot-content-box'&...
浅谈Flex属性定义
皮皮的博客
04-16 946
一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .box{...
flex布局中flex-grow 与 flex-shrink 的详细计算方式
微光的博客
05-15 1535
flex-grow 的计算方式 flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum，是为权重也。 举个例子： 父元素宽度 500px，三个子元素的 wi
flex-grow、flex-shrink、flex-basis详解
weixin_42994534的博客
12-27 132
flex-grow、flex-shrink、flex-basis这三个属性的作用是：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。 其中，这三个属性都是在子元素上设置的。 注：下面讲的父元素，指以flex布局的元素(display:flex)。 flex-basis 该属性来设置该元素的宽度。当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-...
css3 flex-shrink 盒子收缩
周家大小姐
04-13 551
.box{ display:flex; .child{ flex-shrink:10px 0 1; } }
flex-shrink如何使用
09-07
要使用 flex-shrink 属性，需要将元素的 display 属性设置为 flex 或 inline-flex，然后在元素的样式中添加 flex-shrink 属性。 flex-shrink 属性接受一个数字值作为参数，表示项目的缩小比例。默认值为 1。 例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值