如何制作每行限制2元素的flex框？
如何制作每行限制2元素的flex框？
提问于 2022-02-09 16:57:17
我要做一张能容纳多达4台的桌子。但是那个表中的div应该总是使用最大的可用空间。一个一行不应该包含超过2个div，例如，如果表包含2个div，它应该如下所示
如果表中有3个div，那么如下所示：
如果包含4，那么它应该是这样的
为此，我编写了以下代码：
<div
style={{
height: '58vh', border: '1px solid #d9d9d9',
borderRadius: '0px 0px 2px 2px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
<div style={{background:'red', flex: 'auto', margin: '5px'}}
<div style={{background:'green', flex: 'auto', margin: '5px'}}
<div style={{background:'blue', flex: 'auto', margin: '5px'}}
<div style={{background:'pink', flex: 'auto', margin: '5px'}}
</div> 但我漏掉了一些东西。对于1 div和2 div，它按计划工作。但为了更多..。这是我对3div的成绩
和4个div
有人能给我建议一下吗?我应该在这段代码中做些什么？
PS。请不要评判我画得不均匀的斜线:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-09 17:20:10
.container {
display: flex;
flex-wrap: wrap;
}
.inner {
flex-basis: 50%;
flex-grow: 1;
}
.inner:nth-of-type(1) {
background: red;
}
.inner:nth-of-type(2) {
background: gold;
}
.inner:nth-of-type(3) {
background: green;
}
.inner:nth-of-type(4) {
background: blue;
}<div class="container">
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
</div>
我使用了以下步骤来实现您的结果。
- 将包含内部框的容器设置为
flex。 - 给容器
flex-wrap: wrap，以便内部盒没有位置在同一行，移动到下一行。 - 将
flex-basis: 50%放在内部框中，这样它们就能占用50%的可用空间。 - 给内部框
flex-grow: 1，以便如果最后一个盒子还有任何空间，它将占用所有的空间。
参考文献：
PS:试着评论第四个内框，这样第三个盒子就会占据整个水平空间。
Stack Overflow用户
发布于 2022-02-09 17:08:55
你说用Grid做这个是什么意思？
示例：
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;这里是网格指南：https://css-tricks.com/snippets/css/complete-guide-grid/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71053661
复制相关文章
相似问题
腾讯云开发者
