Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos /Frontend SELF ES /Dirección de los ejes

Dirección de los ejes

Frontend SELF ES
Nivel 17 , Lección 2
Disponible

6.1 Propiedad flex-direction

Flexbox proporciona herramientas flexibles y potentes para crear diseños adaptativos. Una parte importante de este sistema son los ejes de disposición, que determinan cómo se colocarán los elementos Flex dentro del contenedor Flex. A continuación, veremos en detalle las propiedades flex-direction y flex-wrap, que controlan la dirección de los ejes y el comportamiento de los elementos Flex en caso de desbordamiento.

La propiedad flex-direction define la dirección del eje principal a lo largo del cual se dispondrán los elementos Flex. Esta dirección puede ser horizontal o vertical, así como directa o inversa.

Valores:

  • row: el eje principal va horizontalmente de izquierda a derecha (valor por defecto)
  • row-reverse: el eje principal va horizontalmente de derecha a izquierda
  • column: el eje principal va verticalmente de arriba a abajo
  • column-reverse: el eje principal va verticalmente de abajo hacia arriba

Ejemplo de uso

1. Los elementos se disponen horizontalmente:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>
Java webinar

2. Los elementos se disponen verticalmente:

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

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
      </div>

      <div class="container-column-reverse">
        <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-row: los elementos se disponen horizontalmente de izquierda a derecha
  • .container-row-reverse: los elementos se disponen horizontalmente de derecha a izquierda
  • .container-column: los elementos se disponen verticalmente de arriba a abajo
  • .container-column-reverse: los elementos se disponen verticalmente de abajo hacia arriba

6.2 Propiedad flex-wrap

La propiedad flex-wrap determina si los elementos Flex se trasladarán a una nueva línea/columna, si no caben en un solo renglón. Esto es especialmente útil para crear diseños adaptativos, donde el tamaño del contenedor puede cambiar dependiendo del dispositivo o pantalla.

Valores

  • nowrap: los elementos no se trasladan y se disponen en una sola línea/columna (valor por defecto)
  • wrap: los elementos se trasladan a una nueva línea/columna si es necesario
  • wrap-reverse: los elementos se trasladan a una nueva línea/columna en orden inverso

Ejemplos de uso

Valor nowrap:

Los elementos no se trasladan y se disponen en una sola línea/columna (valor por defecto).

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valor wrap:

Los elementos se trasladan a una nueva línea/columna si es necesario.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Valor wrap-reverse:

Los elementos se trasladan a una nueva línea/columna en orden inverso.

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

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
      </div>

Explicación del código:

  • .container-nowrap: Los elementos Flex se disponen en una sola línea, incluso si se salen del contenedor
  • .container-wrap: Los elementos Flex se trasladan a una nueva línea si no caben en una sola línea
  • .container-wrap-reverse: Los elementos Flex se trasladan a una nueva línea en orden inverso

6.3 Uso de flex-direction y flex-wrap

Las propiedades flex-direction y flex-wrap pueden combinarse utilizando la propiedad abreviada flex-flow. Esta propiedad permite establecer la dirección del eje y el traslado de elementos al mismo tiempo.

Sintaxis:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

Ejemplo de uso:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">Elemento 1</div>
        <div class="item">Elemento 2</div>
        <div class="item">Elemento 3</div>
        <div class="item">Elemento 4</div>
        <div class="item">Elemento 5</div>
      </div>

Explicación del código:

  • .container: Contenedor Flex con uso combinado de flex-direction: row; y flex-wrap: wrap;, lo que significa que los elementos se disponen horizontalmente y se trasladan a una nueva línea si es necesario
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION