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