Justify-content Solution
This lesson is the solution to the justify-content exercise in the previous lesson.
We'll cover the following
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:
Get hands-on with 1200+ tech skills courses.