Alinhamento no eixo transversal

8.1 Propriedade align-items

As propriedades align-items e align-self permitem alinhar elementos Flex no eixo transversal, garantindo flexibilidade e precisão no layout.

A propriedade align-items controla o alinhamento dos elementos Flex no eixo transversal (perpendicular ao eixo principal) dentro do contêiner Flex. O eixo transversal depende do valor da propriedade flex-direction:

• Se flex-direction tem valor row ou row-reverse, o eixo transversal será vertical
• Se flex-direction tem valor column ou column-reverse, o eixo transversal será horizontal

Valores:

• stretch: elementos se estendem para preencher o contêiner (valor padrão)
• flex-start: elementos são alinhados no início do contêiner
• flex-end: elementos são alinhados no final do contêiner
• center: elementos são alinhados ao centro do contêiner
• baseline: elementos são alinhados pela linha de base do texto

Exemplo de uso:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .align-stretch {
        align-items: stretch;
      }

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

    
      <div class="container align-stretch">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
    
  

8.2 Propriedade align-self

A propriedade align-self permite substituir o valor de align-items para um elemento Flex específico. Essa propriedade é aplicada diretamente ao elemento Flex e controla seu alinhamento no eixo transversal dentro do contêiner Flex.

Valores:

• auto: valor herdado do pai (padrão)
• stretch: elemento se estende para preencher o contêiner
• flex-start: elemento é alinhado no início do contêiner
• flex-end: elemento é alinhado no final do contêiner
• center: elemento é alinhado ao centro do contêiner
• baseline: elemento é alinhado pela linha de base do texto

Exemplo de uso:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Elemento 3</div>
        <div class="item self-center">Elemento 4</div>
        <div class="item self-baseline">Elemento 5</div>
      </div>
    
  

Explicação do código:

• .self-flex-end: este elemento é alinhado ao fundo do contêiner
• .self-center: este elemento é alinhado verticalmente ao centro
• .self-baseline: este elemento é alinhado pela linha de base do texto

8.3 Centralização de elementos

O Flexbox permite facilmente centralizar elementos vertical e horizontalmente, usando uma combinação de justify-content e align-items ou align-self.

Exemplo de uso:

    
      .center-container {
        display: flex;
        justify-content: center; /* centralização horizontal */
        align-items: center; /* centralização vertical */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Elemento Centralizado</div>
      </div>
    
  

Explicação do código:

• .center-container: um contêiner Flex onde os elementos são centralizados horizontalmente usando justify-content: center; e verticalmente usando align-items: center;
• .center-item: um elemento Flex que é centralizado dentro do contêiner

1

Tarefa

Frontend SELF PT, nível 17, lição 4

Bloqueado

Uso do align-items

Uso do align-items

Abrir

1

Tarefa

Frontend SELF PT, nível 17, lição 4

Bloqueado

Uso de flex-start e flex-end

Uso de flex-start e flex-end

Abrir