Step 8-12

Below are five commonly used values for the align-items property:

flex-start — all elements will be positioned at the top of the parent container.
flex-end — all elements will be positioned at the bottom of the parent container.
center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
baseline — the bottom of the content of all items will be aligned with each other.
stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

body {

font-family: 'Roboto Mono', monospace;

}

h1 {

margin: 20px;

text-align: center;

font-size: 18px;

}

.container {

height: 150px;

background-color: whitesmoke;

display: flex;

justify-content: center;

}

.left,

.center,

.right {

height: 75px;

width: 125px;

background-color: dodgerblue;

border: 2px solid lightgrey;

}

#baseline .center {

height: 100px;

width: 100px;

border: 5px solid turquoise;

}

#flexstart {

}

#flexend {

}

#center {

}

#baseline {

}

<!DOCTYPE html>

<html>

<head>

<title>Align Items</title>

</head>

<body>

<h1>Flex Start</h1>

</div>

</div>

<h1>Center</h1>

</div>

<h1>Baseline</h1>

</div>

<h1>Stretch</h1>

</div>

</body>

</html>