Justify-content Solution
Explore how to use the justify-content property in Flexbox to control spacing inside flexible containers. This lesson helps you calculate space distribution for various alignment modes such as flex-start, flex-end, center, space-around, space-between, and space-evenly. You will also understand vertical justify-content arrangements and practical alignment in multi-directional layouts.
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 ...