Alineación en el eje principal

7.1 Propiedad justify-content

Flexbox ofrece herramientas geniales para manejar la alineación y distribución de espacio entre elementos dentro de un contenedor Flex. Una de las propiedades clave para esto es justify-content, que controla la alineación de los elementos Flex a lo largo del eje principal.

La propiedad justify-content define cómo se distribuirán los elementos Flex a lo largo del eje principal del contenedor Flex. El eje principal depende del valor de la propiedad flex-direction:

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

Valores:

• flex-start: los elementos se alinean al inicio del contenedor (valor predeterminado)
• flex-end: los elementos se alinean al final del contenedor
• center: los elementos se alinean en el centro del contenedor
• space-between: los elementos se distribuyen uniformemente con intervalos iguales entre ellos
• space-around: los elementos se distribuyen uniformemente con intervalos a los bordes y entre ellos
• space-evenly: los elementos se distribuyen uniformemente con intervalos iguales entre ellos y en los bordes del contenedor

Ejemplo de uso:

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

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

      .flex-start {
        justify-content: flex-start;
      }
    
  

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

7.2 Valores de justify-content

1. flex-start

Cuando el valor es flex-start, los elementos se alinean al inicio del contenedor Flex, es decir, al lado izquierdo si el eje principal es horizontal (row), o al lado superior si el eje principal es vertical (column).

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: flex-start;
      }
    
  

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

2. flex-end

Cuando el valor es flex-end, los elementos se alinean al final del contenedor Flex, es decir, al lado derecho si el eje principal es horizontal (row), o al lado inferior si el eje principal es vertical (column).

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: flex-end;
      }
    
  

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

3. center

Cuando el valor es center, los elementos se alinean en el centro del contenedor Flex. Este valor es útil para crear diseños centrados.

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: center;
      }
    
  

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

4. space-between

Cuando el valor es space-between, los elementos se distribuyen uniformemente a lo largo del eje principal con intervalos iguales entre ellos. El primer elemento se alinea al inicio del contenedor y el último elemento al final del contenedor.

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: space-between;
      }
    
  

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

5. space-around

Cuando el valor es space-around, los elementos se distribuyen uniformemente con intervalos a los bordes y entre ellos. Los intervalos entre elementos serán el doble de los intervalos en los bordes del contenedor.

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: space-around;
      }
    
  

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

6. space-evenly

Cuando el valor es space-evenly, los elementos se distribuyen uniformemente con intervalos iguales entre ellos y en los bordes del contenedor. Este valor asegura intervalos iguales en todo el contenedor.

Ejemplo de uso:

    
      .container {
        display: flex;
        justify-content: space-evenly;
      }
    
  

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

7.3 Centrando el menú

Ejemplo de uso en proyectos reales — centrando el menú de navegación:

    
      .nav {
        display: flex;
        justify-content: center;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #575757;
      }
    
  

    
      <nav class="nav">
        <a href="#" class="nav-item">Inicio</a>
        <a href="#" class="nav-item">Nosotros</a>
        <a href="#" class="nav-item">Servicios</a>
        <a href="#" class="nav-item">Contactos</a>
      </nav>
    
  

Explicación del código:

• .nav: Contenedor Flex para el menú de navegación con alineación de elementos al centro
• .nav-item: Elementos Flex (enlaces) con estilos básicos