Flexbox - una introducción
¿Qué es flexbox?
Flexbox ( o el módulo de cajas flexibles ) es probablemente uno de los más completos y eficaces módulos de maquetación. Todo lo que era complicado en versiones anteriores de CSS ( como centrar verticalmente o diseñar estructuras que se redimensionen con elegancia ) con flexbox ( CSS3 ) es ya una tarea muy fácil.
¿Cómo crear una caja flex?
Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexible
o caja flex
. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementos
o ítems flex
.
Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.
La propiedad display
esta por ahí desde CSS1, pero es en el CSS3 cuando adquiere la capacidad de transformar una caja cualquiera en un contenedor flex. Para esto tiene que tomar una de estas valores: flex
o flex-inline
.
.flex-container{display:flex;} o .flex-container{display:flex-inline;}
.flex-container{
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-container-inline{
display:-webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
Propiedades del contenedor flex
Propiedad | Sintaxis | Descripción |
---|---|---|
display | display: flex | inline-flex ; display: -ms-flexbox | -ms-inline-flexbox; .flex-container{ display: -webkit-flex; display: -ms-flexbox; display: flex; } |
Si su valor es flex o inline-flex , la propiedad display define un contenedor flex ( flexbox ). |
flex-direction | flex-direction: row | row-reverse | column | column-reverse;
.flex-container{ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } |
Establece la dirección del eje principal y por tanto la dirección de los elementos flex. |
flex-wrap | flex-wrap: nowrap | wrap | wrap-reverse;
.flex-container{ -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } |
Especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ). El valor por defecto es nowrap . |
flex-flow | flex-flow: flex-direction [flex-wrap]
.flex-container{ -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } |
Es la forma abreviada para las propiedades flex-direction y flex-wrap. El valor por defecto es row nowrap |
align-items | align-items: flex-start | flex-end | center | baseline | stretch; -ms-flex-align:start | end | center | baseline | stretch; .flex-container{ -webkit-align-items: flex-start; -ms-flex-align:start; align-items: flex-start; } |
Define como se colocan los elementos dentro de una caja flexible flexbox relativamente al eje transversal. El valor por defecto es stretch . |
justify-content | justify-content: flex-start | flex-end | center | space-between | space-around; -ms-flex-pack: start | end | center | justify | justify; .flex-container{ -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start; } |
Define como se colocan los elementos dentro de una caja flexible ( flexbox ) relativamente al eje principal, cuando los elementos no ocupan toda la caja. El valor por defecto es flex-start . |
align-content | align-content: flex-start | flex-end | center | space-between | space-around | stretch; -ms-flex-line-pack: start | end | center | justify | stretch; .flex-container{ -webkit-align-content: flex-start; -ms-flex-line-pack:start; align-content: flex-start; } |
Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje transversal. El valor por defecto es stretch . |
Propiedades de los elementos ( ítems ) flex
Propiedad | Sintaxis | Descripción |
---|---|---|
align-self | align-self: auto | flex-start | flex-end | center | baseline | stretch; -ms-flex-item-align:auto | start | end | center | baseline | stretch; .item { -webkit-align-self: flex-start; -ms-flex-item-align:start; align-self: flex-start; } |
Reposiciona elementos individuales relativamente al eje transversal. Generalmente se trata de elementos posicionados con align-items . |
flex-grow | flex-grow: número | initial | inherit;
.item{ -webkit-flex-grow: 2; -ms-flex-grow:2; flex-grow: 2; } |
Define cuánto puede crecer un elemento flex, si fuera necesario. El valor por defecto es 0 . |
flex-shrink | flex-shrink: número | initial | inherit;
.item{ -webkit-flex-shrink: 2; -ms-flex-shrink:2; flex-shrink: 2; } |
Define cuánto puede disminuir ( contraerse ) un elemento flex, si fuera necesario. El valor por defecto es 1 . |
flex-basis | flex-basis: número | auto | initial | inherit; .item { -webkit-flex-basis: auto; -ms-flex-basis: auto; flex-basis: auto; } |
Especifica el valor inicial del tamaño principal de un elemento flex. El valor por defecto es auto . |
flex | flex: none | flex-grow [flex-shrink] [flex-basis];
.item { -webkit-flex: 1; -ms-flex: 1; flex: 1; } |
La forma abreviada para flex-grow , flex-shrink y flex-basis juntos. El valor por defecto es 0 1 auto . |
order | order: número | initial | inherit;
.item{ -webkit-order: 2; -ms-order:2; order: 2; } |
Se utiliza para cambiar el orden en el que aparecen los elementos individuales. |
Entender flexbox de manera interactiva.
Artículos relacionados
- - Flexbox - una introducción
- - flex-direction
- - flex-wrap
- - align-items
- - justify-content
- - align-content
- - align-self
- - flex
- - order
- - Entender flexbox
- - Cómo utilizar Modernizr
- - Menú básico flexbox
- - Cuadricula flexbox
- - Maquetación flex
Enlaces útiles
- w3.unpocodetodo.info: Entender Flexbox
- MDN: Usando las cajas flexibles CSS
- La especificación w3.org: CSS Flexible Box Layout Module
- Más información acerca del soporte de flexbox en los navegadores