CSSDiseño de caja flexible (Flexbox)


Introducción

El módulo de la caja flexible, o simplemente 'flexbox' para abreviar, es un modelo de caja diseñado para las interfaces de usuario, y permite a los usuarios alinear y distribuir el espacio entre los elementos en un contenedor de manera tal que los elementos se comporten de manera predecible cuando el diseño de la página debe adaptarse a diferentes elementos desconocidos. Tamaños de pantalla. Un contenedor flexible expande los elementos para llenar el espacio disponible y los reduce para evitar el desbordamiento.

Sintaxis

  • pantalla: flexión;
  • dirección flexible: fila | fila inversa | columna | columna inversa
  • flex-wrap: nowrap | envolver | envolver-revertir
  • flex-flow: <'flex-direction'> || <'flex-wrap'>
  • justify-content: flex-start | extremo flexible | centro | espacio intermedio | espacio alrededor
  • elementos de alineación: inicio flexible | extremo flexible | centro | línea de base | tramo;
  • align-content: flex-start | extremo flexible | centro | espacio intermedio | espacio-alrededor | tramo;
  • orden: <integer>;
  • flex-grow: <número>; / * por defecto 0 * /
  • flexión retráctil: <número>; / * por defecto 1 * /
  • base flexible: <length> | auto; / * predeterminado automático * /
  • flex: ninguno | [<'flex-grow'> <'flex-shrink'>? || <'base flexible'>]
  • align-self: auto | flex-start | extremo flexible | centro | línea de base | tramo;

Observaciones

Prefijos de Vender

  • pantalla: -webkit-box; / * Chrome <20 * /
  • pantalla: -webkit-flex; / * Chrome 20+ * /
  • pantalla: -moczona; / * Firefox * /
  • pantalla: -ms-flexbox; / * IE * /
  • pantalla: flexión; / * Los navegadores modernos * /

Recursos

Diseño de caja flexible (Flexbox) Ejemplos relacionados