如何消除孩子之间的垂直间隙

Question

我在子元素之间的间距有问题。 请参考图片，1是我要实现的目标，2是我现在要获得的目标

<div class="profile-wrapper">

    <div class="profile-menu-area">
        <!-- /. menu here -->
    </div><!-- /.profile-menu-area -->
    <div class="profile-content-area">
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
    </div><!-- /.profile-content-area -->

</div><!-- /.profile-wrapper -->

.profile-wrapper {
    display: flex;
}

.profile-menu-area {
    width: 30%;
}
.profile-content-area{
    margin-left: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.account-pages-button {
    width: 32.3%;
    margin: 1% 0;
    height: 190px;
}

Answer 1

播放最后两个子元素的margin-top元素。这可能会有帮助。

类似的东西：

<div id= apb4 class="account-pages-button"></div><!-- /.account-pages-button -->
<div id= apb5 class="account-pages-button"></div><!-- /.account-pages-button -->

.apb4, .apb5 {
   margin-top: -25%
}

Answer 2

Add "align-content: flex-start"

.profile-wrapper {
        background-color: #fffcb6;
        display: flex;
        width: 100%;
    }

    .profile-content-area{
        width: 100%;
        height: 800px;
        margin: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        background-color: #d2ffc0;

    }

    .account-pages-button {
        width: 30%;
        margin: 10px;
        height: 190px;
        background-color: white;
        flex-shrink: 0;
    }

<div class="profile-wrapper">

    <div class="profile-content-area">
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
        <div class="account-pages-button"></div><!-- /.account-pages-button -->
    </div><!-- /.profile-content-area -->

</div><!-- /.profile-wrapper -->