如何为flex box容器添加水平滚动？
要为flex box容器添加水平滚动，可以通过以下步骤实现：
- 首先，确保你的flex容器已经设置了适当的宽度，并且包含了超出容器宽度的内容。
- 接下来，为flex容器添加一个包裹内容的父容器，并设置其样式为
overflow-x: auto;。这将创建一个具有水平滚动条的容器。 - 在父容器内部，创建一个子容器，并将其样式设置为
display: flex;。这将确保子元素按照flex布局排列。 - 将需要排列的子元素添加到子容器中。
- 最后，根据需要设置子元素的样式，例如设置宽度、间距等。
以下是一个示例代码：
<div class="scroll-container">
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
</div>
</div>.scroll-container {
overflow-x: auto;
}
.flex-container {
display: flex;
}
.item {
width: 200px;
margin-right: 10px;
}在这个示例中，.scroll-container是父容器，.flex-container是子容器，.item是子元素。通过设置.scroll-container的overflow-x属性为auto，创建了一个具有水平滚动条的容器。.flex-container使用了flex布局，.item设置了宽度和间距。
这样，当子元素的总宽度超过父容器的宽度时，就会出现水平滚动条，可以通过滚动条来查看隐藏的内容。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我使用flexbox在HTML中创建一个带有水平滑块的滑块。但是使用下面的代码：<!device-width, initial-scale=1.0"><style> width: 425px; <div></div> <div&
浏览 5提问于2021-03-06得票数 1
2回答
我想要创建一个水平滚动的flex列，它包含几个flex行，但是我想以相反的方式显示每一行。即1,2,3,4,5,6显示为6,5,4,3,2,1。下面是我尝试的一个JSFiddle：
</div>CSS： display: flex;
<em
浏览 0提问于2019-07-15得票数 1
回答已采纳
1回答
我不想让我的列在浏览器视口缩小时堆叠，我希望列保持原样，但有一个水平滚动条显示，这样在较小设备上的用户只需向右滑动滚动即可。;}
height: 100%;
flex-grow: #cccccc; background: #e2e4e6;
border-ra
浏览 12提问于2018-07-23得票数 0
1回答
虽然它们不是垂直的，但我希望它们水平显示。absolute', left: 10, alignItems: 'flex-start', <Text style={styles.name
浏览 23提问于2021-05-10得票数 0
:border-box; flex-flow:column nowrap; overflow:auto;.vboxdarkred; flex:none; display:flex;
overflowborder:0.25
浏览 1提问于2015-02-13得票数 0
: flex;/** CSS Framework: END**/
width: 100%;}
Foobar </div>
</div> 你会看到有一个非常大的容器，它不适合正常的屏幕尺寸。这就是为什么我使用inner-box来设置最大宽度为100%，并启
浏览 18提问于2021-01-25得票数 3
回答已采纳
: border-box; box-sizing: border-box;{ overflow: auto; </script>
但如果要添加更多内容，则使用水平</em
浏览 1提问于2020-05-01得票数 2
回答已采纳
我希望方框2位于#box-cntnr的中心，所以我使用align-self属性。我愿意接受其他方法来完成这件事。。HTML <div class="box" id="b1">box 1</div>
<div class="box" id="b2">box 2</div
浏览 6提问于2016-02-08得票数 1
回答已采纳
其中一个项目是一个div "box“，其中包含了flex:1来填充行的剩余空间。我想使用flex所使用的所有剩余空间:1.如何解决这个问题？
display: flex;
width: 400px
浏览 4提问于2017-01-30得票数 1
回答已采纳
我希望防止flex容器中的元素在非flex-direction的维度中收缩。下面的示例将<article>元素并排放置在一行中。当可用的垂直空间减少时，这些元素不会强迫它们的flex容器显示滚动条；相反，内容会溢出元素边界。屏幕1 -有足够的水平和垂直空间来显示所有内容：屏幕截图2 -缩小的垂直空间将元素边框向上推高：屏幕截图3 -垂直空间进一步减少，容器最终得到一个滚动条：屏幕截图4-
浏览 2提问于2015-03-18得票数 7
1回答
我有一个带有主挠性div main-container和一个子box的角分量。我希望孩子在父母的中间，并且有100%的父母宽度。下面的代码片段显示我的代码正在工作，但在角度上，box的宽度是80 by (由填充)。 padding: 15px; display: flex; align-items: center;.<e
浏览 1提问于2019-04-27得票数 4
回答已采纳
是否可以在flex容器中包含3个项目，但它们的显示方式如下：基本上，第1项和第2项在左侧，以及它们各自需要的高度，那么第3项是右对齐的，但会拉伸弹性容器的整个高度？
浏览 0提问于2016-02-17得票数 1
2回答
当新的div框(.dialog-box)被添加到父容器(.dialog-container)时，我正试图将div“堆叠”在彼此的顶部。为了堆叠这些元素，我在父元素上使用了以下代码：flex-direction: column;我想滚动这个容器来查找溢出的.dialog-box，但使用flex-box时，overf
浏览 0提问于2018-03-27得票数 2
问题是，由于使用了pre标签，卡片的尺寸变得比容器大，因此我在网页上看到了一个水平滚动条。如果内容大小大于卡片大小，如何制作前标签滚动？就像stackoverflow ansers上的代码片段一样。它们不会水平地延伸到页面之外，您会在代码片段中看到一个水平滚动条。; align-items: flex-start; -webkit-
浏览 21提问于2021-05-30得票数 0
1回答
我想要一个主工作区，一个控制面板在右侧，和一个码头在底部将水平滚动，以显示一个动态的项目数。:0;padding:0;height:100vh;width:100vw;}
flex-basis: 100px; height: 100px;: flex;}
background: cyan;}
.d
浏览 2提问于2021-07-08得票数 0
回答已采纳
2回答
我想要显示div，以便它可以水平滚动。我已经创建了一个display flex容器，但我不确定还需要做什么才能使框向左对齐。Here is the demo code .container { border: 1px solid black; flex-direction: column;}
border: 1px solid blac
浏览 26提问于2021-11-08得票数 0
回答已采纳
在内容中，我有一个旋转木马，我想在溢出时水平滚动图像。以下是一个例子：body {}
display: flex;}
border:{}
flex-wrap: nowrap; overflow: auto; <&#x
浏览 1提问于2021-07-09得票数 0
回答已采纳
<div style="display:flex;justify-content:center;align-items:center;">
<p>content
浏览 4提问于2020-04-24得票数 0
我试图理解为什么我不能水平滚动看到其他粉红色的拇指。我在拇指容器中添加了滚动-x溢出，并认为它允许我水平滚动以查看其他拇指；相反，它只垂直滚动。 height: 50px; overflow-x: scroll;.thumb { box-sizin
浏览 1提问于2017-11-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
