CSS Flex布局和间隙(顺风示例)
CSS Flex布局和间隙(顺风示例)
提问于 2022-07-28 21:08:39
比如说，我们有这样的设计：
<div className="w-full flex flex-wrap gap-4">
<div className="w-1/2"></div>
<div className="w-1/3"></div>
<div className="w-1/6"></div>
</div>如果你不懂顺风，没问题：
- W-全部:宽度: 100%
- w-1/2 =宽度: 50%
- w-1/3 =宽度: 33.33%
- w-1-6 =宽度: 16.66%
- 间隙-4=间隙:16 gap
- flex =显示: flex
- 柔性包装=柔性包装:包装；
现在，让我们来谈谈这个问题。我想让这三个div排在一起(因为50% + 33.33% + 16.66% = 100%)，而且它没有间隙，但是当我添加一个间隙时，它会因为空间的增加而崩溃。在更复杂的布局中，将有更多的盒子，宽度为w-1/6倍( w-1/3，w-1/2，w-2/3，w-5/6，w-满)。如何在不增加空间的情况下实现平等的间隙，不包扎，因为差距。
回答 2
Stack Overflow用户
发布于 2022-07-28 22:48:09
这是因为盒子模型是如何工作的:间隙被添加到盒子的宽度上。
然而，你可以通过以下方式达到你想要的结果：
- 向每个单独的元素添加填充
- 使用负边距移除父容器上的填充。
<div class="-mx-2 flex flex-wrap">
<div class="w-1/2 px-2">A</div>
<div class="w-1/3 px-2">B</div>
<div class="w-1/6 px-2">C</div>
</div>Stack Overflow用户
发布于 2022-07-29 10:27:58
使用flex属性而不是宽度
<div class="w-full flex flex-wrap gap-4">
<div class="flex-[3]"></div>
<div class="flex-[2]"></div>
<div class="flex-1"></div>
</div>为了演示目的，我为网格布局创建了一个解决方案--结果会略有不同，因为gap用于div元素中包含的网格
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73159191
复制相关文章
相似问题
腾讯云开发者
