Giustifica il contenuto

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 46 di 76.

In CSS, la proprietà justify-content controlla la spaziatura degli elementi flex lungo l’asse principale di un contenitore flex. Aiuta ad allineare gli elementi e a distribuire lo spazio extra quando ce n’è. Questa proprietà è utile per posizionare gli elementi orizzontalmente (in una riga) o verticalmente (in una colonna), rendendo i layout più flessibili e adattabili.

Ecco la sintassi di base per usare la proprietà justify-content:

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

value: L’allineamento desiderato per gli elementi flex lungo l’asse principale, che può essere uno dei seguenti:

flex-start: Questo è il valore predefinito. Gli elementi sono raggruppati verso l'inizio della riga.

flex-end: Gli elementi sono raggruppati verso la fine della riga.

center: Gli elementi sono centrati lungo la riga.

space-between: Gli elementi sono distribuiti uniformemente lungo la linea, con il primo elemento all'inizio e l'ultimo alla fine.

space-around: Gli elementi sono distribuiti uniformemente lungo la linea, con uno spazio uguale intorno a ciascuno.

space-evenly: Gli elementi sono distribuiti in modo che la spaziatura tra due elementi qualsiasi (e lo spazio dai bordi) sia uguale.

Per esempio:

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

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

In questo esempio, l’elemento .container-start allineerà i suoi elementi flex all’inizio dell’asse principale, mentre l’elemento .container-center centrerà i suoi elementi flex lungo l’asse principale.

Sfida

Facile

Ti viene fornito un documento HTML con due elementi (<div>) che contengono tre elementi figlio (<div>). Gli elementi genitore sono già stati impostati come contenitori flex usando display: flex;. Il tuo compito è usare la proprietà justify-content per allineare gli elementi flex lungo l'asse principale. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe fruits.
Imposta la proprietà justify-content dell'elemento .fruits su center per centrare gli elementi flex lungo l'asse principale.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe vegetables.
Imposta la proprietà justify-content dell'elemento .vegetables su space-between per distribuire gli elementi flex lungo l'asse principale.

Provalo tu

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