Как убрать вертикальный разрыв между детьми

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

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 -->

Answer 2

Поэкспериментируйте с полем 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%
}