Step 34-39

commonly used align-content values:

flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between.
flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between.
center — all rows of elements will be positioned at the center of the parent element with no extra space between.
space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

body {

font-family: 'Roboto Mono', monospace;

}

h1 {

margin: 20px;

text-align: center;

font-size: 18px;

}

.container {

height: 300px;

width: 600px;

background-color: whitesmoke;

display: flex;

flex-wrap: wrap;

margin: auto;

}

.left,

.center,

.right {

height: 75px;

width: 200px;

margin: 2px;

background-color: dodgerblue;

border: 2px solid lightgrey;

}

#flexstart {

}

#flexend {

}

#center {

}

#between {

}

#around {

}

<!DOCTYPE html>

<html>

<head>

<title>Align Content</title>

</head>

<body>

<h1>Flex Start</h1>

</div>

</div>

<h1>Center</h1>

</div>

<h1>Space Between</h1>

</div>

<h1>Space Around</h1>

</div>

<h1>Stretch</h1>

</div>

</body>

</html>