Alineación en el eje transversal

8.1 Propiedad align-items

Las propiedades align-items y align-self permiten alinear elementos Flex en el eje transversal, proporcionando flexibilidad y precisión en el diseño.

La propiedad align-items gestiona la alineación de los elementos Flex en el eje transversal (perpendicular al eje principal) dentro del contenedor Flex. El eje transversal depende del valor de la propiedad flex-direction:

• Si flex-direction tiene el valor row o row-reverse, el eje transversal será vertical
• Si flex-direction tiene el valor column o column-reverse, el eje transversal será horizontal

Valores:

• stretch: los elementos se estiran para llenar el contenedor (valor por defecto)
• flex-start: los elementos se alinean al inicio del contenedor
• flex-end: los elementos se alinean al final del contenedor
• center: los elementos se alinean al centro del contenedor
• baseline: los elementos se alinean a la línea base del texto

Ejemplo 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 Propiedad align-self

La propiedad align-self permite sobreescribir el valor de align-items para un elemento Flex específico. Esta propiedad se aplica directamente al elemento Flex y gestiona su alineación en el eje transversal dentro del contenedor Flex.

Valores:

• auto: el valor se hereda del padre (por defecto)
• stretch: el elemento se estira para llenar el contenedor
• flex-start: el elemento se alinea al inicio del contenedor
• flex-end: el elemento se alinea al final del contenedor
• center: el elemento se alinea al centro del contenedor
• baseline: el elemento se alinea a la línea base del texto

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

Explicación del código:

• .self-flex-end: este elemento se alinea al borde inferior del contenedor
• .self-center: este elemento se alinea al centro verticalmente
• .self-baseline: este elemento se alinea a la línea base del texto

8.3 Centrando elementos

Flexbox permite centrar elementos fácilmente tanto vertical como horizontalmente, usando una combinación de justify-content y align-items o align-self.

Ejemplo de uso:

    
      .center-container {
        display: flex;
        justify-content: center; /* alineación horizontal */
        align-items: center; /* alineación 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 centrado</div>
      </div>
    
  

Explicación del código:

• .center-container: El contenedor Flex donde los elementos están centrados horizontalmente usando justify-content: center; y verticalmente usando align-items: center;
• .center-item: El elemento Flex que se alinea al centro del contenedor