Step 3-7

Below are five commonly used values for the justify-content property:

flex-start — all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.

body {

border: 0;

margin: 0;

font-family: 'Roboto Mono', monospace;

}

h1 {

text-align: center;

display: block;

font-size: 18px;

}

.container {

height: 150px;

width: 100%;

display: flex;

background-color: whitesmoke;

}

.box {

height: 75px;

width: 100px;

background-color: dodgerblue;

border: 1px solid lightgrey;

display: inline-block;

}

#flexstart {

}

#flexend {

}

#center {

}

#spacearound {

}

#spacebetween {

}

<!DOCTYPE html>

<html>

<head>

<title>Flex Justify</title>

</head>

<body>

<h1>Flex Start</h1>

</div>

</div>

<h1>Center</h1>

</div>

<h1>Space Around</h1>

</div>

<h1>Space Between</h1>

</div>

</body>

</html>