CSS Flex Items

Responsive Flexbox

En el capítulo CSS Media Queries aprendiste que puedes utilizar media queries para crear diferentes diseños para diferentes tamaños de pantalla y dispositivos.

Por ejemplo, si deseas crear un diseño de dos columnas para la mayoría de los tamaños de pantalla y un diseño de una columna para tamaños de pantalla pequeños (como teléfonos y tabletas), puedes cambiar la propiedad flex-direction de row a column en un punto de interrupción y/o breakpoint (800px en el siguiente ejemplo):

Ejemplo:

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Ver ejemplo

Otra forma, es cambiar el porcentaje de la propiedad flex de los elementos flexibles para crear diferentes diseños para diferentes tamaños de pantalla. Tenga en cuenta que también debemos incluir flex-wrap: wrap; en el contenedor flexible para que este ejemplo funcione:

Ejemplo

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

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Ver ejemplo

Galería de imágenes responsive usando Flexbox

Utilice flexbox para crear una galería de imágenes responsive que varíe entre cuatro, dos, o imágenes de ancho completo, según el tamaño de la pantalla:

Ejemplo:

@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

Ver ejemplo

Sitio web responsive usando Flexbox

Utilice flexbox para crear un sitio web responsive, que contenga una barra de navegación flexible y contenido flexible:

Ejemplo:

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

Ver ejemplo

Traducido con 💚 desde W3Schools.com