html - flex网格布局内的多个div框垂直

Question

我创建了一个 div css 网格布局，它看起来不错，但现在我在定位框时遇到了第一个问题，layour 是一个仅用于桌面的神圣 grial 3 列。代码如下：

    .container {
display:grid;grid-template-areas:"header header header""nav main aside""footer footer footer";
    height:100%;width:100%;grid-template-columns:250px 1fr 220px;
grid-template-rows:133px 1fr 50px;grid-gap:0;}

    header{grid-area:header;display:flex;background-color:rgba(0,0,0,0.3);border-bottom:solid 1px #282828;margin:0px 0px 0px 0px;}

    nav{grid-area:nav;display:flex;margin:18px 18px 18px 18px;}

    main{grid-area:main;display:flex;background-color:rgba(0,0,0,0.6);border:solid 1px #282828;margin:18px 0px 18px 0px;}

    aside {grid-area:aside;display:flex;margin:18px 18px 18px 18px;}

    footer {grid-area:footer;display:flex;background-color:rgba(0,0,0,0.6);border-top:solid 1px #282828;margin:0px 0px 0px 0px;}

问题是：除了我想垂直放置 4 个 ADS 框，我尝试使用普通 div 并且它不会垂直分隔 div，它们只是水平组合在一起。我尝试在 ASIDE 中创建一个表，如下所示：

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

<div class="functions">
<div class="prepare"><div class="titles">ENERGI</div></div>
<div class="prepare"><div class="boxes">2222</div></div>
</div>

为此，请使用以下 css：

.functions {
display:table;border-collapse:collapse;border-spacing:0;margin-bottom:50;padding:0;border:0;width:100%;height:auto;}

.prepare {display:table-row;margin:0;padding:0;border:0;}

.titles {display:table-cell;padding:3px 6px 3px 6px;color: #999999;background-color:rgba(0,0,0,0.6);border:solid 1px #282828;font-size:12px;font-weight:600;margin:18px 18px 18px 18px;}

.boxes {display:table-cell;padding:6px 6px 6px 6px;color: #999999;background-color:rgba(0,0,0,0.3);border:solid 1px #282828;font-size:12px;font-weight:600;margin:18px 18px 18px 18px;}

只有 1 个盒子看起来不错，但是当我尝试使用 4 个盒子时，它们会像这张图片一样聚集在一起；

如您所见，这些框在水平方向上彼此靠近，但我需要将它们垂直分开，如下所示：

任何的想法？我是否必须使用表格 div 来完成它，还是可以仅使用单个 div 来修复它？尝试了很多东西，但它们似乎是一种恶魔般的痛苦

标签： htmlcss

Answer 1

我是否理解这 4 个 div 位于“aside”元素内？只需将其添加到 css 中即可：

flex-direction: column

然后对于排水沟，您可以添加

margin-bottom: 10px

到你的“功能”课