flex中禁止项目自动压缩

最新推荐文章于 2024-10-22 09:57:12 发布

「已注销」

最新推荐文章于 2024-10-22 09:57:12 发布

阅读量1.3w

点赞数 3

https://github.com/gztrljh

本文链接：https://blog.youkuaiyun.com/ljh101/article/details/109272885

版权

本文介绍了 CSS 中的 flex-shrink 属性作用机制。当容器空间不足时，此属性决定了弹性盒子内项目的缩小比例。若某项目的 flex-shrink 属性设为 0，而其它项目为 1，则在空间不足的情况下，设置为 0 的项目将不会被压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

就是给子元素加

flex-shrink: 0;

就不压缩了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Flex布局详解

segegefe的博客

03-03

2307

Flex 布局详解一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex 解决元素居中问题自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语三个2 序号简记术语 1 二成员容器和项目(container / item) 2 二根轴主轴与交叉轴(main-axis / cross-axis) 3 二根线起始线(main/cross-start)与结束线（main/cross-

flex布局不缩放不自适应

weixin_35751194的博客

01-24

2561

Flex 布局默认是会缩放和自适应的。如果你不希望其缩放和自适应，可以将容器的 flex-shrink 属性设为 0，flex-basis 设为 auto，flex-grow 设为 0。

参与评论您还未登录，请先登录后发表或查看评论

flex布局可能碰到的坑1

热门推荐

ppx2017的博客

08-13

1万+

flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果：相关代码： <view class='hot-content-box'&...

flex 布局缩放窗口时元素不自动缩放

pkowner的专栏

07-25

1033

以上代码flex 布局缩放窗口时元素不自动缩放,把宽度，高度单位调为rem也没用，引起这个问题的原因是插入的图片。尝试把img 属性width值改为100%后解决以上问题。废了不少时间，特此记录一下。

【踩坑记录】flex布局 flex-shrink: 0防止图片被压缩

SSophia的博客

01-12

2231

flex布局 flex-shrink: 0防止图片被压缩 flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0 上述图片代码： .basics-body { display: flex; justify-content: flex-start; align-items: center; margin:16px;

flex布局下，图片会被压缩怎么办？

weixin_42790369的博客

06-26

588

为图片设置flex-shrink: 0;

css flx最后一个元素不用空，flex不自动变长压缩

weixin_49409651的博客

01-04

558

flex-grow: 0; flex-shrink: 0; flex-basis: 33.33%;

vue3 flex自动换行

最新发布

04-03

好的，用户问的是Vue3中如何实现Flex自动换行。首先，我需要回忆一下Flex布局的基本知识，特别是关于换行的部分。Flex布局中，flex-wrap属性控制子元素是否换行，默认是nowrap，也就是不换行。所以设置flex-wrap: ...

flex-wrap: wrap; /* 自动换行 */

02-22

例如，在一个Flex容器中，如果项目的总宽度超过容器的宽度，使用`nowrap`会导致项目被压缩或者溢出，而使用`wrap`则会让多余的项目换到下一行。这样可以保持项目的原有尺寸，同时适应容器的大小。另外，需要提到`...

Flex面试常见问题与解答：滚动条、RSL、SWC与优化

1. 控制滚动条显示：在Flex容器中，可以通过设置`horizontalScrollPolicy`和`verticalScrollPolicy`属性为`off`来禁止水平或垂直方向的滚动条显示，以保持容器的特定布局。 2. FlexBuilder3项目类型：它支持创建三...

flex子元素怎么固定宽度

03-13

需要举例说明，比如一个flex容器中有三个子元素，其中第一个要固定宽度200px，其他两个自动填充。这时候给第一个子元素设置flex: 0 0 200px，其他设为flex:1，这样第一个就不会变化，剩下的平分剩余空间。可能用户...

CSS3过渡效果小练习-进度条

nuomi_w的博客

11-15

1519

Document

禁止 flex 自动调整宽度

qq_47657875的博客

10-22

278

【代码】禁止 flex 自动调整宽度。

flex布局，内部元素过多时被压缩

u010609022的专栏

05-21

913

flex布局有一个属性flex-shrink，指定了当出现压缩时，元素被压缩的比例。默认值是1，所以上面的问题就是由于该属性引起的，默认情况下所有的子元素都被压缩了。我们只要把子元素的flex-shrink设置成0即可。

flex实现窗口关闭时放大和缩小的效果 Zoom

彻底拆分，一切可控！

06-08

1900

zoom类： <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="416" showCloseButton="true" creationComplete="onCreate()" height="304" close="on_win_close()"> <![CDATA[ import

完美解决：flex布局中设置宽度被压缩的问题

Dengjianhao的博客

03-07

895

flex

flex布局导致图片被压缩

画画的贝贝的博客

04-07

467

flex布局导致图片被压缩 flex布局下的子元素flex-shrink(缩小值)默认为1,当父元素宽度小于子元素宽度的和时,该属性生效,所以为了防止图片被压缩可以设置其flex-shrink为0. .cancle{ width: 32rpx; height: 32rpx; margin-right: 16rpx; flex-shrink:0 } ...

flex布局的注意事项

初漾的博客

05-11

1893

Flex布局以后，子元素的float、clear和vertical-align属性将失效flex内部的子元素（除了position:absolute或fixed）无论是display:block或者display:inline，都成为了伸缩项目android浏览器4.4之前对于flex布局支持不好flex-shrink属性用于设置或检索弹性盒的收缩比率，默认为1。不允许为负值，flex-shrin

使用flex布局，echarts图表不能自适应，只能放大不能缩小

weixin_42255789的博客

05-22

1101

结果：经过各种查询发现问题出在使用flex布局的时候echarts多图不能自适应缩放，如果一个flex-item里面只有一个图的话，缩放就没有问题。如果有两个或两个以上就会出现这样的坑。一开始以为是布局写了固定的宽高影响了，卡卡一顿找发现没有任何设置固定的地方，然后以为是图表的自适应出了问题，验证了也不是。这种页面我们一般都是想到了flex布局，写完发现echarts图表不会跟着缩放。方法1:在flex-item里面设置min-width。方法2:不用flex,用float。