Justify-content Exercises
Explore hands-on exercises to understand how justify-content affects spacing among flex items in a Flexbox container. Calculate spacing for different justify-content values and apply vertical alignment with rotated containers to grasp responsive layout concepts.
We'll cover the following...
We'll cover the following...
We will combine the effects of flex-direction and justify-content in this section, and we will also develop an in-depth understanding of spacing around the flex-items.
Exercise 1: Space calculation
Assuming an 800px wide Flex container and four 100px wide (including borders) flex-items, calculate the following empty spaces in the example below:
flex-start. The width of the light green rectangle after the fourth element.