css:flex布局子元素宽度被压缩问题
问题
如题,父元素设置 flex 布局后,子元素如果超出长度则会被压缩,如图:
解决
子元素设置 flex-shrink: 0;
,默认值为 1
介绍 flex-shrink 属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
css:flex布局子元素宽度被压缩问题相关推荐
- 解决uni-app中flex布局子元素宽度溢出
在如下页面中,每一行使用flex布局,每行的头像宽度指定,右侧容器使用flex:1自适应,当name过长时,右侧容器宽度溢出. 页面布局如下 <view class="friend-l ...
- @css flex 布局子内容将父元素撑开
flex 布局子内容将父元素撑开 遇到的问题: 需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现.如下图: 但是通过flex布局实现后发现文本内容过长时将后半部分 ...
- CSS基础:flex布局子元素被撑大(文本省略号)
文本撑大子盒子 在使用flex布局中,会有下面这样一个问题. 这种问题不但会让盒子撑大,而且还有自己在再使用超过文本长度使用省略号的时候,也会再拉动窗口的时候,变的没有效果. 如下: <!DOC ...
- CSS3 Flex布局子元素的属性
弹性布局盒模型的核心,在于弹性容器中子元素的尺寸是弹性的,容器会根据布局的需要,自动调整子元素的尺寸和顺序,并以最佳方式填充所有可用空间. 当容器中有空白空间时,子元素可以扩展,以占据额外的空白空间: ...
- Flex布局子元素对齐方式
display display: flex | inline-flex ; display确定是否启用flexbox布局,flexbox布局下的子元素无论是内联元素的还是块状元素都会flex流的布局方 ...
- flex 影响兄弟元素宽度问题
因为设置了display: flex; 导致block布局变成了flex布局, 所以在子元素宽度没有被撑破的情况下,子元素宽度是有效的,但是当子元素内容过多,此时宽度会比实际宽度小,所以如果想要在已经 ...
- 前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局
文章目录 Chrome调试工具 块级元素 行内元素 盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具 在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...
- css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法
在flex布局下图片被拉伸: 正常的效果: 一.给img元素设置flex-shrink: 0 给 img 设置 flex-shrink: 0; 这种方式不会破坏现有的目录结构,只需要给被拉伸的img添 ...
- css设置元素继承父元素宽度_CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度 第一种情况:元素为文档流中元素 dd dd dd 结论1:把子元素定位换成position:relative与上述例子表现一样,因此在元素不设宽度时,若元素为文档流中元素,则此元素继 ...
最新文章
- pip install faiss-gpu失败unable to execute ‘swig‘: No such file or directory
- Design Pattern - Factory Method(C#)
- dbc2000找不到服务器控制台,控制面板没有BDE Administrator(安装好DBC2000找不到)
- Redis之字典(hashtable)
- [BZOJ2456/ZOJ2132]mode/The Most Frequent Number
- html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
- GPUImage滤镜效果
- Java设计模式之适配器模式详解
- 摸鱼摸累了,看几个有趣的网站
- Photoshop插件-删除所有亮度通道蒙板-脚本开发-PS插件
- C++ CEF3加载高清图片崩溃
- Java锁---偏向锁、轻量级锁、自旋锁、重量级锁
- 基于微信共享小程序系统设计与实现 开题报告
- c语言中,关于延迟函数的理解
- Measurement Studio函数ReadMultiSampleAsync
- mysql 人名_jsp为什么按人名查询mysql结果不显示在页面上?可以
- 8.ExecutorService-执行器服务
- 手术分级标准目录2020_2020年3月份即将实施国家标准目录(四)
- 爱普生L355打印机进纸故障排除
- 电路基本原理那些事儿番外篇 电压
热门文章
- Revo Uninstaller Pro(软件卸载工具)官方中文版V4.4.2.0 | 万能卸载软件下载 | 软件卸载工具哪个好?
- 分析器错误信息 未能加载类型 命名空间 类 ---小结
- “特质波动率之谜”(Idiosyncratic Volatility),用Python计算特质波动率
- 7月,带你阅读图灵原创图书以及上榜新书
- matlab 单位化矩阵,MATLAB数据矩阵单位化,归一化,标准化
- 测试岗位面试前复习之【测试基础知识篇】
- 买阿里云服务器多少钱,不同预算可购买的配置及价格汇总
- python中筛选内容_Python中数据筛选代码实现
- 最简单DIY基于ESP32CAM的物联网相机系统③(在JSP服务器图传相片给所有客户端欣赏)
- sap成本流怎么看_SAP计算产品成本的三种方法