Justify Content

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 46 de 76.

En CSS, la propiedad justify-content controla cómo se espacian los elementos flex a lo largo del eje principal de un contenedor flex. Ayuda a alinear los elementos y a distribuir el espacio adicional cuando queda sitio. Esta propiedad es útil para posicionar elementos horizontalmente (en una fila) o verticalmente (en una columna), haciendo 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 flex 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 flex al inicio del eje principal, el elemento .container-center centrará sus elementos flex a lo largo del eje principal.

Desafío

Fácil

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

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

Hoja de referencia

La propiedad justify-content controla cómo se distribuyen los elementos flex a lo largo del eje principal de un contenedor flex:

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

Valores disponibles:

flex-start: Elementos agrupados hacia el inicio (por defecto)
flex-end: Elementos agrupados hacia el final
center: Elementos centrados a lo largo de la línea
space-between: Elementos distribuidos uniformemente, el primero al inicio y el último al final
space-around: Elementos distribuidos uniformemente con el mismo espacio a su alrededor
space-evenly: Elementos distribuidos con el mismo espacio entre cualquier par de elementos

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

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

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>