时间戳

首页 > 解决方案 > 如何在弹性框中编辑行之间的填充

html - 如何在弹性框中编辑行之间的填充

问题描述

我创建了一个弹性框，它的 CSS 属性是（如果需要，可以链接到所有代码）：

.profileContent
{
    display: flex;
    flex-wrap: wrap;

    height: calc(100vh - 430px); width: 90%;

    border: 10px solid #ED303E;
    border-radius: 15px;

    position: relative;
    left: 50%; top: 125px;
    transform: translateX(-50%);
}

我对我的网站的关注是，行之间的填充会自动在它们之间有很大一部分，如您所见，只有调整窗口大小才会使填充消失。我该如何改变？默认填充和边距选项似乎不适用于此问题。问题似乎是这是一个围绕其他对象的单个对象，因为在 HTML 文档中自己编写一个弹性框不会导致此填充，例如具有以下内容的此文件：

.flexbox {
    display: flex;
    flex-wrap: wrap;
}
    
.box{
    height: 100px;
    width: 100px;
    background-color: coral;
    border: 1px solid black;
}
<div class=flexbox>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
    <div class=box></div>
</div>

标签： htmlcss

解决方案

我会为 flex 元素使用“gap”属性。它与带有网格的“grid-gap”相同。“间隙”基本上是 flexbox 的“网格间隙”。

它会自动在你的弹性元素之间添加间隙。

推荐阅读