SOURCE

<div class="flex">
	<div class="flex-item">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item"></div>
</div>

<div class="flex" style="height:200px; border: 1px solid blue; text-align: center; padding: 0; margin-top: 10px;">
    <div class="left" style="flex: 1; height:200px; text-align: center;border: 1px solid red;">Left</div>
    <div class="center"style="width: 4rem;height:200px; text-align: center;border: 1px solid yellow;">Center</div>
    <div class="right"  style="flex: 1;height:200px; text-align: center;border: 1px solid green;">Right</div>
</div>

.flex {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* align-items: flex-start; */
    /* height: 400px; */
    border: 1px solid red;
    padding: 10px;
    box-sizing: border-box;
}

.flex-item {
    flex: 0 1 calc(25% - 15px);
    /* flex: 0 1 auto; */
    height: 50px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    background: dodgerblue;
    color: white;
}