【flex】设置容器横向滚动 内容超出一屏 但是最左边的内容被遮住的原因 space-around的坑

已于 2023-01-12 19:03:59 修改
阅读量1k 收藏 2
点赞数
分类专栏： css3 flex 文章标签： 前端 javascript css
于 2023-01-12 19:03:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/128664891
版权
css3 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
flex
2 篇文章 0 订阅
订阅专栏

起因

我们经常会使用flex布局，但也因为这个让我遇到了个问题

情景再现

设置div容器横向滚动，内容超出一屏，并且容器设置

display: flex;
flex-direction: row;
justify-content: space-around;
flex: 1;
overflow: auto;

但是出现了最左边的内容被遮住的情况
在这里插入图片描述

解决

经过排查，发现是justify-content: space-around;导致的，换成justify-content: space-between;或者不设置该项即可正常显示

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题.doc
03-13
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题，简单，高效，好用。
flex布局实现横向滚动踩坑
weixin_47190898的博客
11-17 294
flex布局实现横向滚动踩坑，tabs标签栏滚动
当使用flex弹性布局时，设置属性justify-content:space-around，但需要元素左对齐
前端，请指教
03-24 1151
用一行显示的最多个数减1的空标签补位 <!-- 补最大的位数-1 --> <div class="li" for="(item,index) in [1,1,1]"></div> .li { width: 25%; height: 0; }
css - flex布局实现div横向滚动
最新发布
爱意迷了眼丶的博客
02-27 516
父盒子：子盒子：
flex居中（justify-content: center和 align-items:center ）遇坑。
热门推荐
qq_44983621的博客
03-10 2万+
justify-content: center和 align-items:center 当你使用flex布局时 会经常用到这两个属性但是有时会发现为什么失灵了，为什么怎么样都居中不了，明明刚才还管用 ，（前几天博主就遇到了这种情况）… 这个连个属性在网上查到的都是说前者是水平居中后者是垂直居中 但是其实这种是不完全正确的只是其中一种情况，如果是另一种情况的话就会失效。 步入正题那么是为什么会...
flex横向排列不换行显示滚动条，内容自动撑开
qq_42103673的博客
10-19 4134
flex横向排列不换行显示,内容自动撑开
flex布局下横纵向布局下--横向滚动
qinnansky的专栏
12-02 2680
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <div class="o-box"> <div class="l-box"></div> <div class="m-box"> <div class="content"></div> .
使用flex写个横向滚动
qq_40278455的博客
02-07 4521
结构 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 样式 <style type="text/css"> ...
【css】flex-shrink：0的方法让div横向滚动。
KatyLight的博客
08-05 690
【css】flex-shrink：0的方法让div横向滚动。
三个属性让你学会书写横向滑动窗口！内附代码和详解！
yilia学习小园
07-18 496
此时子组件child1、child2和child3明显宽度变窄了，要是想保持子组件宽度不变，需要在子组件上添加flex-shrink: 0约束。之所以设置这个属性有用，是因为在默认情况下，flex-shrink的值为1，父元素宽度不够时，子元素会自己调整所占的宽度比。除此之外还有一个属性常被提到，即white-space，可以控制自组件内的文字不换行，如下图所示。父组件改为flex布局之后，子组件默认横向排列，代码和组件如下所示。初始代码和界面如下所示，显示为三个长宽固定的组件，默认从上到下排列。
Flex布局常见父项属性（二）- justify-content和flex-wrap
JHY97的博客
01-05 4650
1. justify-content用于设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的对其方式（使用前必须确定主轴是x轴还是y轴） 1.1. 属性值 justify-content属性值 属性值 说明 flex-start 从头部开始（如果主轴是x轴，从左到右）；默认值 flex-end 从尾部开始排序 center 在主轴居中对齐（如果主轴是x轴，则水平居中） space-around 平分剩余空间 space-
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-... flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
在使用justify-content:space-between布局时，针对最后一行元素使用 justify-self: start;没有效果，查了下css3 flexbox 还未支持。 那么如何实现最后一行左对齐呢？ 现有的几个方案 使用标签元素补全缺的item ...
Re-Flex:可调整大小的Flex布局容器组件，用于高级React Web应用程序
05-02
Re-F | ex是我创建的基于React flex的布局组件库，因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示： import ...
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
12-13
在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。 例如：打算一行放三个子元素 效果： 这看起来一点问题都没有，还挺好看的，但是如果下一行不够三个呢，只有...
css less 文件:global的写法
hzxOnlineOk的博客
09-10 1万+
css :global #close-button { margin-bottom: 20px !important; } .attachItem :global #nprogress { background: #eee; height: 0; } less :global { .signin_list .am-list-item .am-list-line .am-list-content { padding-top: 15px; padding-botto.
absolute绝对定位的元素显示不出来的可能原因
hzxOnlineOk的博客
08-07 9757
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
react 行内样式的!important不生效怎么处理
hzxOnlineOk的博客
06-13 3905
React本身不支持在行内style里直接写成fontSize: `${fontSize}px !important`，具体原因不清楚 解决办法如下代码所示，使用ref的方式去处理该h1虚拟元素的样式： <h1 className="contentTitle" style={{ textAlign: titleCenter ? 'center' : 'left', .
react或者css实现多行文本超出加省略号（多行省略）
hzxOnlineOk的博客
03-16 2668
width: 200px; // 必须指定宽度 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 正常的写法是这样, 但是对于react不适用, React的jsx写法应该是这样子的: width: 20...
css Flex flex-direction: column;内容超过高度时出现横向滚动条，但是不出现纵向滚动条
06-08
如果您想在Flex容器中禁用纵向滚动条，但允许横向滚动条出现，可以使用以下样式： ```css .parent-element { display: flex; flex-direction: column; max-height: 100vh; /* 设置最大高度 */ overflow-x: auto; /* 允许横向滚动条 */ overflow-y: hidden; /* 禁用纵向滚动条 */ } ``` 这里，我们将Flex容器的方向设置为`column`，然后将`overflow-x`属性设置为`auto`，以允许横向滚动条出现。同时，将`overflow-y`属性设置为`hidden`，以禁用纵向滚动条。此外，我们还设置了一个最大高度，以确保内容不会超出浏览器窗口的高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值