¶ÔÆëÄÚÈÝ | align-content

/* Positional alignment */
align-content: center;     /* Pack items around the center */
align-content: start;      /* Pack items from the start */
align-content: end;        /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */
align-content: left;       /* Pack items from the left */
align-content: right;      /* Pack items from the right */

/* Baseline alignment */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: space-evenly;  /* Distribute items evenly
                                 Items have equal space around them */
align-content: stretch;       /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

#container {
??height:200px;
??width: 240px;
??align-content: center; /* Can be changed in the live sample */
??background-color: #8c8c8c;
}

.flex {
??display: flex;
??flex-wrap: wrap;
}

.grid {
??display: grid;
??grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
??box-sizing: border-box;
??border: 2px solid #8c8c8c;
??width: 50px;
??display: flex;
??align-items: center;
??justify-content: center;
}

#item1 {
??background-color: #8cffa0;
??min-height: 30px;
}

#item2 {
??background-color: #a0c8ff;
??min-height: 50px;
}

#item3 {
??background-color: #ffa08c;
??min-height: 40px;
}

#item4 {
??background-color: #ffff8c;
??min-height: 60px;
}

#item5 {
??background-color: #ff8cff;
??min-height: 70px;
}

#item6 {
??background-color: #8cffff;
??min-height: 50px;
??font-size: 30px;
}

select {
? font-size: 16px;
}

.row {
? margin-top: 10px;
}

<div id="container" class="flex">
? <div id="item1">1</div>
? <div id="item2">2</div>
? <div id="item3">3</div>
? <div id="item4">4</div>
? <div id="item5">5</div>
? <div id="item6">6</div>
</div>

<div class="row">
? <label for="display">display: </label>
? <select id="display">
? ? <option value="flex">flex</option>
? ? <option value="grid">grid</option>
? </select>
</div>

<div class="row">
? <label for="values">align-content: </label>
? <select id="values">
? ? <option value="normal">normal</option>
? ? <option value="stretch">stretch</option>
? ? <option value="flex-start">flex-start</option>
? ? <option value="flex-end">flex-end</option>
? ? <option value="center" selected>center</option>
? ? <option value="space-between">space-between</option>
? ? <option value="space-around">space-around</option>
? ? <option value="space-evenly">space-evenly</option>

? ? <option value="start">start</option>
? ? <option value="end">end</option>
? ? <option value="left">left</option>
? ? <option value="right">right</option>

? ? <option value="baseline">baseline</option>
? ? <option value="first baseline">first baseline</option>
? ? <option value="last baseline">last baseline</option>

? ? <option value="safe center">safe center</option>
? ? <option value="unsafe center">unsafe center</option>
? ? <option value="safe right">safe right</option>
? ? <option value="unsafe right">unsafe right</option>
? ? <option value="safe end">safe end</option>
? ? <option value="unsafe end">unsafe end</option>
? ? <option value="safe flex-end">safe flex-end</option>
? ? <option value="unsafe flex-end">unsafe flex-end</option>
? </select>
</div>