Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

Especificación Estado Comentario
CSS Flexible Box Layout Module Candidate Recommendation Definición inicial.

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.

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: mdnwebdocs-bot, danpaltor, tipoqueno, pepe2016, fscholz
Última actualización por: mdnwebdocs-bot,