vue中用flex布局为什么没有间隙，margin-top无效，只能用定位，这样是不是不太好？怎么弄呢？

Question

<template>
<div id="box">

<div class="header">小咖投递站</div>
<div class="delivery">投递新文</div>
<div class="update">更新文档</div>
<div class="claim">认领文档</div>
<div class="correction">内容纠错</div>
<div class="reward">知识悬赏令?</div>

</div>
</template>
<style>
*{padding: 0;

margin: 0;
list-style: none;

}
#box{

/* display: -webkit-flex; */
 /* display: inline-flex; */
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-content: space-around;

}
.header{

width: 100%;
height: 50px;
background: #259b24;
color: white;

}
.delivery,.update,.claim,.correction{

/* align-self: flex-end; */
width: 300px;
height: 220px;
border: 1px solid #c2c2c2;
background: #c9c9c9;

}
.reward{

margin-top: 20px;
width: 1300px;
height: 400px;
border: 1px solid #c2c2c2;
background: #c9c9c9;

}
</style>

Answer 1

首先这个和 vue 没有什么关系。楼主想要达到一个什么样的效果呢？建议楼主去看看阮一峰针对 flex 介绍的文章，传送门

Answer 2

<div id='box'>
    <div class='item'>
        <div class="header">小咖投递站</div>
    </div>
    ...
</div>

嵌套一层，给item设置内边距