[css]flex定位图片被自适应文字挤压

最新推荐文章于 2024-07-24 15:20:58 发布
最新推荐文章于 2024-07-24 15:20:58 发布
阅读量661 收藏 2
点赞数 1
分类专栏： pits 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qubes/article/details/130379527
版权

[css]flex定位图片被自适应文字挤压

problem

flex定位

  • 左边图片 固定宽度 80px
  • 右边文字 宽度自适应

问题

  • 右边文字少，只有1行的时候，图片宽度是80px固定不变
  • 右边文字多，只有2/3行的时候，图片宽度会变小56px
    在这里插入图片描述

reason

左边被挤压了
flex 元素的收缩规则，flex-shrink 默认值是 1
当子元素超出父元素，则自适应区域会挤压其他区域

solution

左边图片设置样式：flex-shrink:0;
不是不能被挤压

在这里插入图片描述

snowDreamzzz
关注
专栏目录
CSS Flex布局 （弹性布局）(圣杯布局)
m0_69793485的博客
05-14 593
Flex布局（弹性布局）的特点 1.浏览器提倡的布局模型，页面渲染性很高。 2.布局简单，方便。 3.可以避免浮动脱标的问题。 4.兼容性高（不兼容低版本的浏览器） Flex布局模型构成 设置方式： 给父元素设置display:flex,子元素可以自动的挤压或拉伸； 组成部分 1.弹性容器（父级，添加了display:flex的盒子） 2.弹性盒子（子级） 3.主轴（默认水平） 4.侧轴 / 交叉轴（默认垂直） 主轴对齐方式 justify-content： flex-star
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1767
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
jQuery.flexslider图片插件自适应屏幕大小带缩略图
11-17
jQuery.flexslider图片插件自适应屏幕大小带缩略图
flex 图片自动适应大小
weixin_30335353的博客
06-11 1135
<!--http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/--><mx:Applicationname="FullScreen_test"xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"...
设置了固定宽高的图片被压缩，如何解决？
最新发布
u010609022的专栏
07-24 312
这是因为在flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0。.existCollages .row image {通常实现如下的效果，是把外层容器设置为display:flex，容器中图片设置固定宽高度，右边元素设置为flex:1，但当右边元素宽度超出剩余空间的时候，图片会被挤压，变成椭圆形。设置了固定宽高的图片被压缩。
flex 图片自适应
知否
02-17 2624
<br /> 让图片始终保持在100%显示效果 <br /><br /><br />最初代码为 <br /><mx:Image id="mySelf" width="46" height="44" y="6" left="7" source="@Embed('images/14.gif')" toolTip="用户头像" autoLoad="true" /><br /><br />修改后<br /><mx:Canvas width="46" height="44" y="6" left="7">
CSS 效果：多列文字，第一行对齐,flex方式元素被挤压
LlanyW的专栏
10-16 978
如图效果：2列，第一列只有一行，第二列多行。实现：使用flex 配置flex-shrink。
css小技巧之------防止图片加载以后挤下文本位置
baidu_41601048的博客
01-26 2141
经常会遇到这样一个问题： 远程加载图片的时候，如果图片本身比较大。加载时间比较长，而图片下面有div内容的时候。会出现图片未加载之前，文本挪上去了。而图片加载完成以后。文本被挤下去。这个体验很不好。 有没有办法实现，当图片未加载之前就让图片所在的空间占位不变，加载完成以后文本依然固定在该位置，同时保持图片宽高比不变呢？ 通过css来实现： <style> .wrap{ width: 1200px; margin: 2
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
在网页布局设计中，有时我们需要实现一种效果，即左侧的文字能够根据内容自动调整宽度，并在空间不足时自动省略，而右侧的文字则需要保持自适应并全显，不会因为左侧文字过多而被挤压。这种效果通常可以利用CSS的...
三栏布局 、垂直中间自适应布局，CSS实现自适应下保持宽高比，垂直居中
纯净天空
06-18 1389
两边固定，中间自适应 圣杯和双飞翼都是先加载中间部分， 圣杯直观，需要定位 双飞翼简洁 1，圣杯布局 <style> .container{ padding-left: 200px; padding-right: 100px; } .con{ float: left...
【移动web】Flex布局模型、移动适配、响应式网页
zilin_taku的博客
07-28 827
flex布局/弹性布局-是一种浏览器提倡的布局模型-布局网页更简单、灵活-避免浮动脱标的问题。
Flex实现图片放大缩小
01-07
Flex应用zoom实现图片的放大缩小，很简单的实例，可以给新手一些思路
flex布局(图片自适应展示)
lydia_love的博客
05-25 5111
利用flex布局实现多张图片自适应展示实现效果实现方式 实现效果 实现方式 我是利用flex布局来控制的. 这样子写的话会有一个问题，因为space-between是两端布局，若是一行的图片没有5个的话，他中间的间距会拉大，不会一直保持这个间距自适应。 最后加了一个计算的方法，来判断图片是否撑满了一行，若是没有撑满一行，则我们生成div，将图片撑满。 js: /**flex布局计算一行放多少个，没放满往前挤 * PIC_WIDTH: 图片的宽度 * TOTAL: 代
Flex上传之前预览图片并让图片大小自动适应容器
zzfolin的专栏
05-28 242
最近找了一下让图片 自动适应容器的例子，网上也有；但是有些不是很理想。其实说白了 就是让容器的大小跟图片的真实大小进行比值，针对各种情况进行处理图片的大小，对图片按照一定的比值进行缩放。下面是我整理的例子，希望对遇到这个问题的同志有帮助。 示例：   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Applicatio...
弹性盒子布局宽度自适应-图片自适应
weixin_46078934的博客
02-09 1382
vue中弹性盒子布局宽度自适应-图片自适应
CSS3设置flex，图片的高度被自适应了
qq_53066188的博客
05-20 1045
如图所示,因为给最内存的图片宽度设置了width:100%，会寻找上一级的高度，上一级没设置会自动寻找父元素,父元素的宽度为整个页面,所以img宽度为父元素宽度的6分之一,自然高度也会自适应变小了,设置width：600自然就能恢复高度了 ...
flex 布局子元素被挤压的问题
Allen-Ye博客
03-06 2211
flex布局子元素补挤压问题
css字压,CSS3 挤压爆破的文字动画
weixin_32083393的博客
08-04 344
CSS语言：CSSSCSS确定@-webkit-keyframes explosion {10% {content: "1";color: white;font-size: 20px;}20% {content: "2";color: white;font-size: 40px;}30% {content: "3";color: white;font-size: 60px;}40% {conten...
flex-shrink属性：解决父元素为flex布局，子元素的宽度收到挤压变形的问题
qq_41964720的博客
05-10 732
项目需求：在每段文字的前面添加一个小圆点，方案一：使用ul-li布局，方案二：使用flex布flex-shrink属性：解决父元素为flex布局，子元素的宽度收到挤压变形的问题
css flex布局自适应
05-30
CSS Flex布局是一种基于弹性盒子模型的布局方式，可以帮助我们快速、方便地实现页面的自适应。它通过对容器和其内部元素的属性设置，来实现容器内元素的自适应排列和对齐方式的控制。 Flex布局中最常用的属性包括：display、flex-direction、justify-content、align-items、flex-wrap、flex等。其中，flex属性可以通过设置子元素的伸缩比例来实现不同元素之间的空间分配。 使用Flex布局可以有效地解决传统布局方式难以处理的一些复杂布局问题，例如等高布局、自适应布局等。同时，Flex布局还能够很好地适应不同屏幕尺寸的设备，实现页面在不同设备上的自适应效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值