Justify Content

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 46 de 76.

No CSS, a propriedade justify-content controla como os itens flexíveis são espaçados ao longo do eixo principal de um contêiner flexível. Ela ajuda a alinhar itens e distribuir o espaço extra quando sobra espaço. Esta propriedade é útil para posicionar itens horizontalmente (em uma linha) ou verticalmente (em uma coluna), tornando os layouts mais flexíveis e responsivos.

Aqui está a sintaxe básica para usar a propriedade justify-content:

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

value: O alinhamento desejado para os itens flex ao longo do eixo principal, que pode ser um dos seguintes:

flex-start: Este é o valor padrão. Os itens são agrupados em direção ao início da linha.

flex-end: Os itens são agrupados em direção ao final da linha.

center: Os itens são centralizados ao longo da linha.

space-between: Os itens são distribuídos uniformemente ao longo da linha, com o primeiro item no início e o último item no fim.

space-around: Os itens são distribuídos uniformemente ao longo da linha, com espaços iguais ao redor deles.

space-evenly: Os itens são distribuídos de forma que o espaçamento entre quaisquer dois itens (e o espaço até as bordas) seja igual.

Por exemplo:

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

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

Neste exemplo, o elemento .container-start alinhará seus itens flexíveis ao início do eixo principal, o elemento .container-center centralizará seus itens flexíveis ao longo do eixo principal.

Desafio

Fácil

Você recebeu um documento HTML com duas divisões (<div>) que contêm três divisões filhas (<div>). As divisões pai já foram configuradas como um contêiner flex usando display: flex;. Sua tarefa é usar a propriedade justify-content para alinhar os itens flex ao longo do eixo principal. Siga as etapas abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe fruits.
Defina a propriedade justify-content do elemento .fruits como center para centralizar os itens flex ao longo do eixo principal.
Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe vegetables.
Defina a propriedade justify-content do elemento .vegetables como space-between para distribuir os itens flex ao longo do eixo principal.

Folha de consulta

A propriedade justify-content controla como os itens flex são espaçados ao longo do eixo principal de um contêiner flex:

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

Valores disponíveis:

flex-start: Itens agrupados no início (padrão)
flex-end: Itens agrupados no final
center: Itens centralizados ao longo da linha
space-between: Itens distribuídos uniformemente, o primeiro no início, o último no final
space-around: Itens distribuídos uniformemente com espaço igual ao redor deles
space-evenly: Itens distribuídos com espaçamento igual entre quaisquer dois itens

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

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

Experimente você mesmo

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