Justify-content Exercises

We will combine the effects of flex-direction and justify-content in this section, and we will also develop an in-depth understanding of spacing around the flex-items.

Exercise 1: Space calculation

Assuming an 800px wide Flex container and four 100px wide (including borders) flex-items, calculate the following empty spaces in the example below:

1. flex-start. The width of the light green rectangle after the fourth element.
2. flex-end. The width of the light green rectangle before the first element.
3. center. The width of the light green rectangle before the first element and the width of the light green rectangle after the last element.
4. space-around. The width of the following green rectangles:
   • (i) the rectangle before the first element
   • (ii) the rectangle after the last element
   • (iii) the rectangles between two adjacent elements.
5. space-between. The width of the rectangles between two adjacent elements.
6. space-evenly. The width of the following green rectangles:
   • (i) the rectangle before the first element
   • (ii) the rectangle after the last element
   • (iii) the rectangles between two adjacent elements.

Also, calculate the sum of the widths of all rectangles for each justify-content variant. Do they differ or are they equal?

This exercise will help you better understand how Flexbox positions Flex-items using justify-content. Even though you will not perform these calculations in the future by hand, chances are that solving this exercise helps you avoid a common Flexbox confusion. Most people mix up space-around, space-between, and space-evenly. This is your chance to develop an in-depth understanding of these options.