<!DOCTYPE html>
<html>
<head>
<style>
#container {
height: 350px;
width: 60%;
border: solid black 1px;
display: flex;
flex-wrap: wrap;
place-content: end space-between;
}
#container > div {
flex-basis: 40px;
height: 40px;
margin: 2px;
background-color: coral;
}
</style>
</head>
<body>
<h1>The place-content Property</h1>
<p>Resize window to see the effect more clearly. The flex lines are placed at the bottom of the container in the column direction, and the flex items are aligned with the same space between them in the row direction.</p>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>