Justify Content

Part of the Styling with CSS section of Coddy's HTML journey — lesson 46 of 76.

In CSS, the justify-content property controls how flex items are spaced along the main axis of a flex container. It helps align items and distribute extra space when there is room left. This property is useful for positioning items horizontally (in a row) or vertically (in a column), making layouts more flexible and responsive.

Here's the basic syntax for using the justify-content property:

.container {
    display: flex;
    justify-content: value;
}

value: The desired alignment for the flex items along the main axis, which can be one of the following:

flex-start: This is the default value. Items are packed toward the start of the line.

flex-end: Items are packed toward the end of the line.

center: Items are centered along the line.

space-between: Items are evenly distributed along the line, with the first item at the start and the last item at the end.

space-around: Items are evenly distributed along the line, with equal space around them.

space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

For example:

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

In this example, the .container-start element will align its flex items to the start of the main axis, the .container-center element will center its flex items along the main axis.

Challenge

Easy

You are given an HTML document with two divisions (<div>) that contain three child divisions (<div>). The parent divisions have already been set as a flex container using display: flex;. Your task is to use the justify-content property to align the flex items along the main axis. Follow the steps below:

Write a CSS rule that targets the <div> element with the class fruits.
Set the justify-content property of the .fruits element to center to center the flex items along the main axis.
Write a CSS rule that targets the <div> element with the class vegetables.
Set the justify-content property of the .vegetables element to space-between to distribute the flex items along the main axis.

Cheat sheet

The justify-content property controls how flex items are spaced along the main axis of a flex container:

.container {
    display: flex;
    justify-content: value;
}

Available values:

flex-start: Items packed toward the start (default)
flex-end: Items packed toward the end
center: Items centered along the line
space-between: Items evenly distributed, first at start, last at end
space-around: Items evenly distributed with equal space around them
space-evenly: Items distributed with equal spacing between any two items

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

Try it yourself

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>