<div class="container">
<div class="div1">Box 1</div>
<div class="div2">Box 2</div>
<div class="div3">Box 3</div>
<div class="div4">Box 4</div>
<div class="div5">Box 5</div>
<div class="div1">Box 6</div>
<div class="div2">Box 7</div>
<div class="div3">Box 8</div>
<div class="div4">Box 9</div>
<div class="div5">Box 10</div>
<div class="div1">Box 11</div>
<div class="div2">Box 12</div>
<div class="div3">Box 13</div>
<div class="div4">Box 14</div>
<div class="div5">Box 15</div>
<div class="div1">Box 16</div>
<div class="div2">Box 17</div>
<div class="div3">Box 18</div>
<div class="div4">Box 19</div>
<div class="div5">Box 20</div>
</div>
xxxxxxxxxx
.container
{
display:flex;
height: 600px;
border:1px solid black;
flex-wrap: wrap;
/* align-content: flex-end; */
align-content: center;
/* align-content: flex-start; */
/* align-content: space-around; */
/* align-content: space-between; */
/* align-content: stretch; */
}
div > div
{
border: 1px solid black;
height: 100px;
width:100px;
margin: 10px;
}
.div1
{
background-color: #97ffff;
}
.div2
{
background-color: #8f5890;
}
.div3
{
background-color: #e4bb69;
}
.div4
{
background-color: #78add5;
}
.div5
{
background-color: #db8980;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.