flex-shrink的使用

最新推荐文章于 2024-06-26 10:44:48 发布
最新推荐文章于 2024-06-26 10:44:48 发布
阅读量949 收藏 1
点赞数
分类专栏： 记不住的属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44177602/article/details/117522098
版权

flex-shrink: 0;

当使用flex布局时候，设置的子盒子平均占据了容器的空间，如果这时候添加一个div，设置宽度，并不会显示，容器已经没有空间给这个flex管理的div空间，所以需要给它设置 flex-shrink：0；退出flex，这样就会显示宽度

background-size: contain/cover;

控制背景图片的大小，contain：整个背景图都要包含在内。没有超出的部分。cover：覆盖，背景图要覆盖所有区域，不能出现空白。

跟影子说丨晚安
关注
专栏目录
flex属性：flex-grow/flex-basis/flex-shrink
qq_43650979的博客
05-17 225
flex属性：flex-grow/flex-basis/flex-shrink flex的“可伸缩”主要体现在flex-grow/flex-basis/flex-shrink这三个属性上 flex-basis 未应用flex-grow和flex-shrink之前，flexbox中的项的初始大小,默认取值是auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
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;，所以他和...
flex布局中flex-shrink的使用
weixin_44777146的博客
04-21 7242
<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
flex属性中的flex-grow、flex-shrink、flex-basis
最新发布
卿本无忧的博客
06-26 1093
flex属性中的flex-grow、flex-shrink、flex-basis
display:flex;实战,flex-shrink的用法
wwwwwwxjjj的博客
04-21 364
flex-shrink的用法 页面要求自适应,搜索框的高度不是固定的,所以table的高度也就不能固定,table的高度随着搜索框的高度变化,页面不出现滚动条,纯css实现, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...
css flex布局 —— 项目属性 flex-shrink
且听风吟的博客
10-18 2万+
css flex布局 —— 项目属性 flex-shrink
css flex shrink,CSS3 flex-shrink属性用法详解
weixin_35862131的博客
08-04 711
下面本文章来给各位介绍一下CSS3 flex-shrink使用方法，希望例子能帮助到各位。flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，fle...
详解关于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）如何根据可用空间进行扩展和收缩。理解这两个属性的计算方式对于创建响应式和动态的网页布局至关重要。 ...
flex-shrink:0
weixin_51725685的博客
03-02 1290
flex-shrink:0
CSS3 Flexbox中flex-shrink属性的用法
fghffrrfghffrr的专栏
12-29 1235
在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 来固定元素不被挤压
liubangbo的专栏
06-28 9523
看下代码： ​ <html> <head> <style type="text/css"> .div-wrapper { width: 600px; background-color: grey; display: flex; justify-content: space-between; } .input-cls{ widt
【踩坑记录】flex布局 flex-shrink: 0防止图片被压缩
SSophia的博客
01-12 2096
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弹性布局教程-05项目属性flex-shrink
晴空闲云
09-21 2280
本篇介绍了 flex-shrink 属性，flow-grow 用于放大，那么 flex-shrink 就是缩小了，其缩小规则和 flex-grow 类似。 阅读时间约10~15分钟，文字虽多，但主要都是例子。
Flex的flex-grow：1与flex-shrink1，0
世界既不黑也不白，而是一道精致的灰。
12-25 2288
Flex的flex-grow：1与flex-shrink1，0 flex-grow: 0; / 0表示正常状态，不放大 / flex-grow: 1; / 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。 flex-shrink: 0; / 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）
Kate_sicheng的博客
06-22 2万+
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。 子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。 当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？4个子div的宽度比是 1:1:3:3，4个子元素的默认flex-shrink值都是1，
flex-shrink计算
qq_40285497的博客
05-31 1550
flex-shrink的计算和flex-grow是不同的，flex-shrink不同项有权重不同，下面举个例子&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &
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、付费专栏及课程。

余额充值