Diseño de caja flexible CSS

El diseño CSS Flexbox es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.

Ejemplo Básico

En el siguiente ejemplo, se ha definido un contenedor como display: flex, lo que significa que los tres elementos hijo se convierten en elementos flexibles. El valor de justify-content se ha establecido en space-between para espaciar los elementos de manera uniforme en el eje principal. Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible. También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de align-items es stretch. Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.

Referencia

Propiedades CSS

Propiedades de alineación

Las propiedades align-content, align-self, align-items y justify-content aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.

Entradas del glosario

Guías

Conceptos básicos de Flexbox

Una visión general de las características de flexbox

Relación de flexbox con otros métodos de diseño.

Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS

Alinear elementos en un contenedor flexible

Cómo funcionan las propiedades de Alineación de cuadro con flexbox.

Ordenando elementos flex

Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.

Control de proporción de elementos flex a lo largo del eje principal

Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.

Dominar el envoltorio de elementos flex

Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.

Casos de uso típicos de flexbox

Patrones de diseño comunes que son los típicos casos de uso de flexbox.

Compatibilidad con versiones anteriores de Flexbox

Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación

Especificaciones

Specification
CSS Flexible Box Layout Module Level 1

Ver también

Flexbugs

una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox

Combinaciones (Mixins) Flexbox para varios navegadores

Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.