Justify Content

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 46 из 76.

В CSS свойство justify-content управляет распределением флекс-элементов вдоль главной оси флекс-контейнера. Оно помогает выравнивать элементы и распределять свободное пространство, когда оно остается. Это свойство полезно для позиционирования элементов по горизонтали (в строку) или по вертикали (в колонку), делая макеты более гибкими и адаптивными.

Вот базовый синтаксис для использования свойства justify-content:

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

value: Желаемое выравнивание для flex-элементов вдоль главной оси, которое может быть одним из следующих:

flex-start: Это значение по умолчанию. Элементы располагаются в начале строки.

flex-end: Элементы прижимаются к концу строки.

center: Элементы выравниваются по центру вдоль линии.

space-between: Элементы равномерно распределены вдоль строки, при этом первый элемент находится в начале, а последний — в конце.

space-around: Элементы равномерно распределены по линии, с равным пространством вокруг них.

space-evenly: Элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (а также расстояние до краев) было одинаковым.

Например:

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

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

В этом примере элемент .container-start выровняет свои flex-элементы по началу главной оси, а элемент .container-center центрирует свои flex-элементы вдоль главной оси.

Задание

Легко

Вам дан HTML-документ с двумя блоками (<div>), которые содержат три дочерних блока (<div>). Родительские блоки уже установлены как flex-контейнеры с помощью display: flex;. Ваша задача — использовать свойство justify-content для выравнивания flex-элементов вдоль главной оси. Выполните следующие шаги:

Напишите CSS-правило для элемента <div> с классом fruits.
Установите свойство justify-content для элемента .fruits в значение center, чтобы центрировать flex-элементы вдоль главной оси.
Напишите CSS-правило для элемента <div> с классом vegetables.
Установите свойство justify-content для элемента .vegetables в значение space-between, чтобы распределить flex-элементы вдоль главной оси.

Шпаргалка

Свойство justify-content определяет, как флекс-элементы распределяются вдоль главной оси флекс-контейнера:

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

Доступные значения:

flex-start: Элементы прижаты к началу (по умолчанию)
flex-end: Элементы прижаты к концу
center: Элементы центрированы вдоль линии
space-between: Элементы распределены равномерно, первый в начале, последний в конце
space-around: Элементы распределены равномерно с равным свободным пространством вокруг них
space-evenly: Элементы распределены так, что расстояние между любыми двумя элементами одинаково

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

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

Попробуйте сами

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