Justify-content Solution

This section will help you verify the solutions of the exercises.

Part 1: Empty space dimensions

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

Question 1. flex-start. The width of the light green rectangle after the fourth element.

Solution: For all exercises, 400px out of 800px is allocated for the four Flex-items. The other 400px is distributed by the different justify-content modes as empty space.

In the first exercise, the solution is obvious: all 400px is assigned to the end of the Flex container.

Question 2. flex-end. The width of the light green rectangle before the first element.

Solution: The answer is the same as in Question 1, as this case is the mirror image of the first exercise. The width of this rectangle is 400px.

Question 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.

Solution: The same 200px - 200px area is distributed before and after the four elements.

Question 4. space-around. The width of the following green rectangles: (a) the rectangle before the first element (b) the rectangle after the last element (c) the rectangles between two adjacent elements.

Solution: Now comes the interesting part. Suppose the following dimensions for each box:

       ------
      | Item |
       ------
<----><------><---->
  x     100px    x

We have four boxes:

4 * (100px + 2x) = 800px

400px + 8x = 800px

8x = 400px

x = 50px

Questions (a) and (b) are thus solved: the width of these rectangles is 50px.

As there is 50px space after the first element, and 50px space before the second element, the amount of space between the first and the second elements is 100px (2x).

Question 5. space-between. The width of the rectangles between two adjacent elements.

In this exercise, all the space goes between adjacent Flex-items. We have three inner gaps that are equal in width. The width of one inner gap is 400px / 3 = 133.33px (rounded to two decimal places).

Question 6. space-evenly. The width of the following green rectangles: (a) the rectangle before the first element (b) the rectangle after the last element (c) the rectangles between two adjacent elements.

Solution: The principle behind space-evenly is that all spaces are equal, therefore, (a) = (b) = (c). We have 5 spaces in total. Each space has a width of 400px / 5 = 80px.

Final Question: Calculate the sum of the widths of all rectangles for each justify-content variant. Do they differ or are they equal?

Solution: We clarified this answer in question 1, as we based our calculation on this information. The available width is uniform, 400px.

Part 2: Vertical justify-content

Three ideas were needed for the solution.

First, we placed containers around each h2 - flex-container pair to contain them and align them as Flex-items of the body.

As the h2 title was too large to be displayed in 150px, we decreased their font-size to 14px and centered them.

The body was used as a Flex container again, displaying the five vertical flex containers next to each other.

The inner .flex-container elements got a flex-direction: column; setting. The dimensions of the flex-container elements and the inner flex-items also changed.

The final solution looks as follows: