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

Guías

Usando cajas flexibles CSS
Tutorial paso a paso sobre como construir diseños usando esta opción.
Usando flexbox para diseñar Aplicaciones Web
Tutorial explicando como usar flexbox en el contexto específico de Aplicaciones Web.

Especificaciones

Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation Initial definition.

Compatibilidad Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 4.4 11 12.10 7.1-webkit

 

Etiquetas y colaboradores del documento

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