Align Items

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 47 de 76.

No CSS, a propriedade align-items controla como os itens flex são alinhados ao longo do eixo transversal (o oposto do eixo principal). Ela ajuda a posicionar itens verticalmente em uma linha ou horizontalmente em uma coluna. Esta propriedade é útil para tornar os layouts mais flexíveis e responsivos.

Aqui está a sintaxe básica para usar a propriedade align-items:

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

value: O alinhamento desejado para os itens flexíveis ao longo do eixo transversal, que pode ser um dos seguintes:

stretch: Este é o valor padrão. Os itens flexíveis são esticados para preencher o contêiner ao longo do eixo transversal, respeitando min-width/max-width e min-height/max-height.

flex-start: Os itens flex são posicionados no início do eixo transversal.

flex-end: Os itens flexíveis são posicionados no final do eixo transversal.

center: Os itens flex são centralizados ao longo do eixo transversal.

baseline: Os itens flex são alinhados de forma que suas linhas de base se alinhem.

Por exemplo:

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

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

Neste exemplo, o elemento .container-start alinhará seus itens flexíveis ao início do eixo transversal, o elemento .container-center centralizará seus itens flexíveis ao longo do eixo transversal.

Desafio

Fácil

Você recebeu um documento HTML com duas divisões (<div>), cada uma contendo três divisões filhas.

Siga os passos abaixo:

Estilize o elemento <strong>.seas</strong>:
- Escreva uma regra CSS que selecione o elemento <div> com a classe .seas.
- Defina display como flex para habilitar o posicionamento flexível dos elementos filhos.
- Defina a propriedade align-items como center para alinhar os itens flex no meio do eixo transversal.
Estilize o elemento <strong>.oceans</strong>:
- Escreva uma regra CSS que selecione o elemento <div> com a classe .oceans.
- Defina display como flex para habilitar o posicionamento flexível dos elementos filhos.
- Defina a propriedade align-items como flex-end para alinhar os itens flex no final do eixo transversal.

Folha de consulta

A propriedade align-items controla como os itens flex são alinhados ao longo do eixo transversal (oposto ao eixo principal):

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

Valores disponíveis:

stretch: Padrão. Os itens se esticam para preencher o contêiner
flex-start: Itens posicionados no início do eixo transversal
flex-end: Itens posicionados no final do eixo transversal
center: Itens centralizados ao longo do eixo transversal
baseline: Itens alinhados pelas suas linhas de base

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

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

Experimente você mesmo

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