gpt4 book ai didi

html - flex 容器内的 flex-wrap 元素不会使容器的宽度变大

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:28 26 4
gpt4 key购买 nike

<分区>

所以我要求 3 个元素 block 看起来像这样:

enter image description here

没有垂直滚动,只有水平滚动。为了实现这一点,我想我可以用容器 display: flex 制作 3 个 div.block 然后让我的元素在每个 .block flex 本身和换行(注意它们也需要上下左右,所以 flex-direction: column)

但是正如您在这段代码(或 codepen)中看到的那样,当我这样做时,3 个 .block 的宽度只是拒绝扩展到它们内容的宽度,即使 .brick 将它们相互重叠起来,因为 .block` 保持与单个列一样大。

我怎样才能做到这一点?我觉得 flex 不是容器的正确工具,但我已经尝试过 display: inline-block 并使用带有 3 tdtable > 做完全相同的事情。

我不确定如何让 .container 随着更多内容的进入而增加宽度并让 .block 也增加。

.container {
width: 600px;
height: 200px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
}

.block {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

.brick {
width: 100px;
height: 50px;
margin: 5px;
}

.brick-red {
background: red;
}

.brick-blue {
background: blue;
}

.brick-orange {
background: orange;
}
<div class="container">
<div class="block">
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
<div class="brick brick-red"></div>
</div>
<div class="block">
<div class="brick brick-blue"></div>
<div class="brick brick-blue"></div>
<div class="brick brick-blue"></div>
<div class="brick brick-blue"></div>
<div class="brick brick-blue"></div>
</div>
<div class="block">
<div class="brick brick-orange"></div>
<div class="brick brick-orange"></div>
<div class="brick brick-orange"></div>
<div class="brick brick-orange"></div>
<div class="brick brick-orange"></div>
</div>
</div>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com