x
<html><head><style>.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; overflow: scroll; background-color: DodgerBlue;}.flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}</style></head><body><h1>The align-content Property</h1><p>align-content: space-between; - The space between the flex lines are equal, but the first item is flush with the start edge of the container, and the last item is flush with the end edge of the container:</p><div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div>