Distribución del espacio

9.1 Propiedad flex-grow

En Flexbox hay diferentes herramientas para manejar la distribución del espacio entre elementos dentro de un contenedor Flex. Las propiedades flex-grow, flex-shrink y flex-basis juegan un papel clave en el control del tamaño y el comportamiento de los elementos Flex en diversas condiciones. Ahora vamos a examinar en detalle cada una de estas propiedades y su uso.

La propiedad flex-grow define la capacidad de un elemento Flex de aumentar su tamaño para ocupar el espacio disponible en el contenedor. El valor de flex-grow representa un coeficiente que indica cuánto puede crecer un elemento en comparación con otros elementos Flex.

Valores:

• Número entero o valor decimal
• Valor por defecto: 0 (el elemento no crece)

Ejemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 500px;
      }

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

Explicación del código:

• .grow-1: estos elementos tienen el valor flex-grow: 1;, lo que les permite crecer uniformemente
• .grow-2: este elemento tiene el valor flex-grow: 2;, lo que le permite crecer el doble en comparación con los elementos con flex-grow: 1;

9.2 Propiedad flex-shrink

La propiedad flex-shrink define la capacidad de un elemento Flex de reducir su tamaño si el espacio en el contenedor está limitado. El valor de flex-shrink representa un coeficiente que indica cuánto puede reducirse un elemento en comparación con otros elementos Flex.

Valores:

• Número entero o valor decimal
• Valor por defecto: 1 (el elemento puede reducirse)

Ejemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

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

Explicación del código:

• .shrink-0: este elemento tiene el valor flex-shrink: 0;, lo que no le permite reducirse
• .shrink-1: estos elementos tienen el valor flex-shrink: 1;, lo que les permite reducirse según sea necesario

9.3 Propiedad flex-basis

La propiedad flex-basis define el tamaño inicial de un elemento Flex antes de distribuir el espacio libre. Puede establecerse en varias unidades de medida, como píxeles, porcentajes y otras.

Valores:

• Longitud en varias unidades (px, %, em, etc.)
• Valor por defecto: auto (el tamaño lo determina el contenido)

Ejemplo de uso:

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Elemento 1</div>
        <div class="item basis-100px">Elemento 2</div>
        <div class="item basis-50percent">Elemento 3</div>
      </div>
    
  

Explicación del código:

• .basis-auto: este elemento tiene el valor flex-basis: auto;, lo que significa que su tamaño lo determina el contenido
• .basis-100px: este elemento tiene un tamaño inicial fijo de 100 píxeles
• .basis-50percent: este elemento tiene un tamaño inicial del 50% del ancho del contenedor

9.4 Uso de las propiedades

La propiedad flex es una abreviatura para establecer flex-grow, flex-shrink y flex-basis. Permite gestionar los tres aspectos de la distribución del espacio en una sola propiedad.

Sintaxis:

    
      .container {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Ejemplo de uso:

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

Explicación del código:

• .flex-1: este elemento tiene flex: 1 1 auto;, lo que significa que puede crecer y reducirse uniformemente con otros elementos, y su tamaño inicial lo determina el contenido
• .flex-2: este elemento tiene flex: 2 1 100px;, lo que significa que puede crecer el doble en comparación con los elementos con flex-grow: 1;, puede reducirse y tiene un tamaño inicial de 100 píxeles
• .flex-3: este elemento tiene flex: 1 0 50%;, lo que significa que puede crecer, pero no reducirse, y su tamaño inicial es del 50% del ancho del contenedor