Justificar el contenido

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 46 de 76.

En CSS, la propiedad justify-content controla cómo se distribuyen los elementos flexibles a lo largo del eje principal de un contenedor flex. Ayuda a alinear los elementos y a distribuir el espacio adicional cuando queda espacio disponible. Esta propiedad es útil para posicionar elementos horizontalmente (en una fila) o verticalmente (en una columna), lo que hace que los diseños sean más flexibles y adaptables.

Aquí tienes la sintaxis básica para usar la propiedad justify-content:

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

value: La alineación deseada para los elementos flexibles a lo largo del eje principal, que puede ser una de las siguientes:

flex-start: Este es el valor predeterminado. Los elementos se agrupan hacia el inicio de la línea.

flex-end: Los elementos se agrupan hacia el final de la línea.

center: Los elementos se centran a lo largo de la línea.

space-between: Los elementos se distribuyen uniformemente a lo largo de la línea, con el primer elemento al principio y el último al final.

space-around: Los elementos se distribuyen uniformemente a lo largo de la línea, con el mismo espacio a su alrededor.

space-evenly: Los elementos se distribuyen de modo que el espaciado entre dos elementos cualesquiera (y el espacio hacia los bordes) sea igual.

Por ejemplo:

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

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

En este ejemplo, el elemento .container-start alineará sus elementos flexibles al inicio del eje principal, y el elemento .container-center centrará sus elementos flexibles a lo largo del eje principal.

Desafío

Fácil

Se te proporciona un documento HTML con dos divisiones (<div>) que contienen tres divisiones secundarias (<div>). Las divisiones principales ya se han configurado como un contenedor flex mediante display: flex;. Tu tarea es usar la propiedad justify-content para alinear los elementos flexibles a lo largo del eje principal. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <div> con la clase fruits.
Establece la propiedad justify-content del elemento .fruits en center para centrar los elementos flexibles a lo largo del eje principal.
Escribe una regla CSS que seleccione el elemento <div> con la clase vegetables.
Establece la propiedad justify-content del elemento .vegetables en space-between para distribuir los elementos flexibles a lo largo del eje principal.

Pruébalo tú mismo

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