Fundamentos de Flexbox

5.1 Conceptos básicos de Flexbox

Flexbox (Flexible Box Layout) — es un sistema de diseño CSS poderoso que proporciona formas flexibles y eficientes para distribuir espacio y alinear elementos dentro de un contenedor. Flexbox es especialmente útil para crear diseños complejos y diseños adaptativos. Ahora vamos a revisar los fundamentos de Flexbox, incluyendo la creación de contenedores Flex y elementos, y también el uso de la propiedad display: flex;.

Conceptos básicos de Flexbox

Flexbox consiste en dos componentes clave:

• Flex-container: elemento padre que incluye los elementos Flex.
• Elementos Flex: elementos hijos dentro del Flex-container, que se alinean y distribuyen de acuerdo a las reglas de Flexbox.

Flex-container

Un Flex-container se crea con la propiedad display: flex; o display: inline-flex;. El Flex-container gestiona la disposición de sus elementos hijos (elementos Flex) y proporciona muchas opciones para su alineación y distribución.

    
      .container {
        display: flex; /* o inline-flex */
      }
    
  

Ejemplo de uso:

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

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

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

Explicación del código:

• .container: Flex-container, creado con display: flex;. Dentro de este contenedor los elementos se alinean y distribuyen de acuerdo con las reglas de Flexbox.
• .item: Elementos Flex que son elementos hijos del Flex-container.

5.2 Propiedades del Flex-container

La propiedad display: flex; define un elemento como Flex-container. Los elementos hijos de este contenedor automáticamente se convierten en elementos Flex y empiezan a seguir las reglas de Flexbox.

display: flex;

Crea un Flex-container de bloque. El Flex-container se comporta como un elemento de bloque, ocupando todo el ancho disponible del elemento padre.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Crea un Flex-container en línea. El Flex-container se comporta como un elemento en línea, ocupando solo el ancho necesario, y puede ubicarse junto a otros elementos en línea.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Ejemplo de uso:

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

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

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

      <div class="inline-container">
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>
    
  

Explicación del código:

• inline-container — es un Flex-container, creado con display: inline-flex;. Dentro de este contenedor, los elementos se alinean y distribuyen de acuerdo con las reglas de Flexbox. Los contenedores se comportan como elementos en línea y se ubican uno junto a otro.

5.3 Propiedades de los elementos Flex

1. La propiedad flex es una forma abreviada de establecer flex-grow, flex-shrink y flex-basis. Permite gestionar cómo los elementos Flex se estiran y contraen para llenar el espacio disponible.

Sintaxis:

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

Ejemplo de uso:

    
      .item {
        flex: 1;
      }
    
  

2. Propiedad order

La propiedad order determina el orden en el que los elementos Flex se disponen dentro del Flex-container. Por defecto, todos los elementos tienen el valor order: 0;.

Valores

Números enteros. Los elementos con un valor menor se ubicarán antes que los elementos con un valor mayor.

Sintaxis:

    
      .element {
        order: valor;
      }
    
  

Ejemplo de uso:

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

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

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Explicación del código:

• .item-1: tiene el valor order: 2, por lo que se ubicará después del elemento con order: 1
• .item-2: tiene el valor order: 1, por lo que se ubicará primero
• .item-3: tiene el valor order: 3, por lo que se ubicará al final

1

Tarea

Frontend SELF ES, nivel 17, lección 1

Bloqueada

Flex-contenedor

Flex-contenedor

Abrir

1

Tarea

Frontend SELF ES, nivel 17, lección 1

Bloqueada

Contenedor Inline-Flex

Contenedor Inline-Flex

Abrir