无法在无溢出的柔性网格中设置间隙或边距
无法在无溢出的柔性网格中设置间隙或边距
提问于 2022-02-27 19:16:12
我总是使用CSS网格，但我发现了如何使用flex构建网格，这更符合我的需要:一个全屏两列网格，其可变行数分布在整个窗口中。所以我写了这个：
body {
margin:0;
}
container {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
}
box {
box-sizing: border-box;
background-color: lightgray;
border: 2px solid white;
width: 50%;
padding: 10px;
border-radius: 10px;
}<body>
<container>
<box>1</box>
<box>2</box>
<box>3</box>
<box>4</box>
<box>5</box>
<box>6</box>
</container>
</body>
在这里：https://codepen.io/kastaldi/pen/GROYopw
我可以添加或删除“框”元素和网格自动适应。不幸的是，我无法在方框之间添加空白，因为CSS属性溢出，尽管存在“空格”或“边距”，所以我使用白色边框添加了一个假空白。我不是CSS专家，所以我搜索了这里和flexbox生成器，但我没有找到解决方案。我漏掉了什么吗？谢谢。
回答 2
Stack Overflow用户
发布于 2022-02-27 19:23:14
我建议您使用display:grid，似乎它更适合这种情况。特别是使项目响应，并有差距，他们之间。
Stack Overflow用户
发布于 2022-02-27 19:25:25
我以前也有过这个问题。如果您不担心响应性布局，我会这样做：
container {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
justify-content: center;
}
box {
box-sizing: border-box;
background-color: lightgray;
border: 2px solid white;
width: 45%;
margin: 20px;
height: 200px;
padding: 10px;
border-radius: 10px;
}你可以根据你的喜好加或减边距。这对我来说真的很管用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71287766
复制相关文章
相似问题
腾讯云开发者
