Alinear elementos

Parte de la sección Estilos con 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 flexibles 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 flexibles a lo largo del eje transversal, que puede ser una de las siguientes:

stretch: Este es el valor predeterminado. Los elementos flexibles 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 flexibles se colocan al inicio del eje transversal.

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

center: Los elementos flexibles están centrados a lo largo del eje transversal.

baseline: Los elementos flexibles se alinean de modo que sus líneas base queden alineadas.

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 flexibles al inicio del eje transversal, y el elemento .container-center centrará sus elementos flexibles 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 secundarias.

Sigue los pasos a continuación:

Da estilo al elemento <strong>.seas</strong>:
- Escribe una regla CSS que seleccione el elemento <div> con la clase .seas.
- Establece display en flex para permitir el posicionamiento flexible de los elementos secundarios.
- Establece la propiedad align-items en center para alinear los elementos flexibles en el centro del eje transversal.
Da estilo al elemento <strong>.oceans</strong>:
- Escribe una regla CSS que seleccione el elemento <div> con la clase .oceans.
- Establece display en flex para permitir el posicionamiento flexible de los elementos secundarios.
- Establece la propiedad align-items en flex-end para alinear los elementos flexibles al final del eje transversal.

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>