Align Items

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

En CSS, la propiedad align-items controla cómo se alinean los elementos flex a lo largo del eje transversal (el opuesto al eje principal). Ayuda a posicionar los elementos verticalmente en una fila u horizontalmente en una columna. Esta propiedad es útil para hacer que los diseños sean más flexibles y adaptables.

Aquí tienes la sintaxis básica para usar la propiedad align-items:

.container {
    display: flex;
    align-items: value;
}

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

stretch: Este es el valor por defecto. Los elementos flex se estiran para llenar el contenedor a lo largo del eje transversal respetando min-width/max-width y min-height/max-height.

flex-start: Los elementos flex se colocan al inicio del eje transversal.

flex-end: Los elementos flex se colocan al final del eje transversal.

center: Los elementos flex se centran a lo largo del eje transversal.

baseline: Los elementos flex se alinean de tal manera que sus líneas de base se alinean.

Por ejemplo:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

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

Desafío

Fácil

Se te proporciona un documento HTML con dos divisiones (<div>), cada una con tres divisiones hijas.

Sigue los pasos a continuación:

Estiliza el elemento <strong>.seas</strong>:
- Escribe una regla CSS que apunte al elemento <div> con la clase .seas.
- Establece display en flex para habilitar el posicionamiento flexible de los elementos hijos.
- Establece la propiedad align-items en center para alinear los elementos flex en el medio del eje transversal.
Estiliza el elemento <strong>.oceans</strong>:
- Escribe una regla CSS que apunte al elemento <div> con la clase .oceans.
- Establece display en flex para habilitar el posicionamiento flexible de los elementos hijos.
- Establece la propiedad align-items en flex-end para alinear los elementos flex al final del eje transversal.

Hoja de referencia

La propiedad align-items controla cómo se alinean los elementos flex a lo largo del eje transversal (el opuesto al eje principal):

.container {
    display: flex;
    align-items: value;
}

Valores disponibles:

stretch: Por defecto. Los elementos se estiran para llenar el contenedor
flex-start: Los elementos se colocan al inicio del eje transversal
flex-end: Los elementos se colocan al final del eje transversal
center: Los elementos se centran a lo largo del eje transversal
baseline: Los elementos se alinean por sus líneas de base

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Pruébalo tú mismo

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>