弹性布局加滚动条宽度被压缩

最新推荐文章于 2024-07-02 11:33:04 发布
原创 最新推荐文章于 2024-07-02 11:33:04 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在使用Flex布局时避免子元素被压缩，通过给父元素添加overflow:auto属性，并将子元素的flex-shrink设为0，从而在宽度超出时显示滚动条，适用于手机端左右滑动查看。

设置父元素为flex布局,并添加横向滚动条使子元素横向排列

问题:使用flex布局后宽度被压缩.
在这里插入图片描述
解决方法:
首先.给当前设置display:flex的元素加上overflow:auto;然后给子元素加上flex-shrink: 0;
实现子元素不压缩，超出宽度展示滚动条

在这里插入图片描述
手机端可以左右滑动

弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值
页面突然有了滚动条导致页面抖动了一下，内容宽度变小
肖肖肖丽珠的博客
03-23 1213
overflow-y: overlay;
关于弹性布局可滚动的问题
JandyPam的博客
11-18 443
父级 flex{ display: flex; overflow: auto; } 子级 flex-item{ flex-basis: 145rpx; flex-shrink: 0; margin-right: 16rpx; width: 145rpx; height: 69rpx; text-align: center; line-height: 69rpx; font-size: 24rpx; border-radius:
完美解决：flex布局中设置宽度被压缩的问题
热门推荐
web_ding的博客
03-17 2万+
问题描述： 在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩； 产生原因： 当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩 解决方法: 给固定宽度的元素添加flex-shrink:0 flex-shrink:0; TIPS： flex-shrink平时在使用过程中 比较少见，具体查看flex-shrink链接 ...
解决滚动条挤压页面宽度
k912120的博客
01-02 878
转载：https://blog.youkuaiyun.com/weixin_34112208/article/details/88731678 解决办法如下： html { overflow-y: scroll; //这是为了兼容ie8，不支持:root, vw } :root { overflow-y: auto; overflow-x: hidden; } :root body ...
flex 如何获得滚动条的宽度
olfisher的专栏
01-31 1180
this.horizontalScrollBar.getChildAt(0).width
左右两栏flex自适应布局，右栏出现滚动条会压缩左栏宽度，怎么办
08-07
### 解决 Flex 布局中滚动条压缩问题 #### 核心问题分析 在左右两栏 Flex 布局中，当右栏内容过多出现滚动条时，会导致： 1. 右栏宽度被滚动条侵占 2. 左栏被意外压缩（因为 Flex 容器默认 `flex-shrink: 1`） ---...
在一个div中，由于引入纵向滚动条导致内容被压缩，字体溢出后导致出现横向滚动条，怎么解决
最新发布
08-07
/* 假设滚动条宽度为17px */ } ``` ### 5. 使用 `scrollbar-gutter` 控制滚动条空间 现代浏览器支持 `scrollbar-gutter` 属性，可以在内容区域预留滚动条空间，避免布局抖动： ```css .right_down { scrollbar-...
Flex布局中滚动条不显示问题及解决方案
但在实践中，即使内容明显溢出，滚动条却并未出现，且子元素的宽度被异常压缩。这种现象的根本原因在于Flex布局中子元素默认的收缩行为（flex-shrink）以及未正确配置flex属性所致。 关键解决方法是为需要保持固定...
滚动条改变页面布局，怎么办
08-07
**原理**：100vw包含滚动条宽度，100%不包含 --- ### 二、响应式解决方案 #### 1. CSS视口单位修正 ```css :root { --scrollbar-width: 0px; } @media (hover: hover) { /* 只在有指针设备的场景下生效 */ :...
css实现中间内容宽度固定，屏幕分辨率缩小显示横向滚动条
05-15
好的，用户的问题是想用CSS实现内容宽度固定，当屏幕缩小后显示横向滚动条。首先，我需要回忆一下相关的CSS属性和常见的布局方法。 首先，内容宽度固定的话，可能需要给容器设置一个固定的宽度，比如width: 1200px;...
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？
sun19931127的博客
01-10 4638
页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。
css：浏览器滚动条出现时页面宽度会缩窄页面抖动
彭世瑜的博客
10-09 2379
【代码】css：浏览器滚动条出现时页面宽度会缩窄页面抖动。
解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题
qq_29705009的博客
12-03 981
解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题
flex-grow 与flex-shink
Jonn1124的博客
08-02 4304
flex-grow flex-grow的作用是灵活的分配父元素的剩余空间给子元素，强调的是父元素的剩余空间 每个子元素默认的flex-grow为0，及不划分剩余空间 所有子元素的flex-grow的总和表示把父元素的剩余空间分为多少份 每个子元素的flex-grow的值：又表示占父元素剩余空间的几份 如果flex-grow的值为小数，就是表示占剩余空间的百分比，如果小数小于1，就会有剩余空间没有被分配，会留白。 flex-shink flex-shink：表示超出父元素宽高的部分按照特定比例进行压缩（
css修改 滚动条挤压内容变形（仅供自己参考）
qq_31876111的博客
05-29 1959
修改后 一 、scroll方法 始终显示滚动条 .table-head { padding-right: 17px; } .table-body { overflow-y: scroll; } 二 、overlay方法 参考链接 overlay 行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。 .table-body { h.
flex布局中子元素内容超出时，子元素本身出现滚动条实现方法
Misnice的博客
07-02 2115
flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条
flex布局一行显示多个固定宽度的子元素，超出父盒子宽度的内容滚动条显示
weixin_44351233的博客
09-21 5679
实现效果：父盒子flex布局，子元素一行显示，且子元素宽度固定，超出父盒子部分的内容滚动条显示。
display:flex内容自适应如何出现横向滚动条？
weixin_41637577的博客
01-04 4173
父盒子设置 .box{ display:flex; } 子盒子 .item{ flex: 1; overflow: auto; /* 横向滚动条 overflow-x: auto; 纵向滚动条 overflow-y: auto; */ width: 0; /* 若横向需要出现滚动条 */ height: 0; /* 若纵向需要出现滚动条 */ } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值