freeCodeCamp Challenge Guide: Align Elements Using the justify-content Property

Align Elements Using the justify-content Property


Problem Explanation

As stated on the challenge, to pass it you need to set the justify-content to center. However, the point of the challenge is to experiemnt and see how the different options affect the content.

center: Will ensure your child elements are centered in the parent container.

flex-start: Will push everything to the left side.

flex-end: Will push everything to the right side.

space-between: Will push the first and last elements to the left and right respectivelly and add even space between. If you have odd numbers of elements it will add them to the center and keep pushing left and right depending on the order.

space-around: Will do similar to space-between but there will be equal spacing around the elements so the first and last will not be directly on the edge.