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