Flexbox
Desarrollo de aplicaciones web flexibles
Joan Leon
Frontend Developer at Schibsted Spain
Nos permite controlar:
- La orientación
- La distribución de espacio entre elementos, incluso si sus tamaños son desconocidos o dinámicos
- El orden entre elementos
- El espacio intermedio entre los elementos
Un poco de historia
- En 19 años de CSS no hemos tenido una espicificación concreta para trabajar con el layout.
- La W3C empezó a trabajar en la especificación en 2009
- En el proceso han habido varias sintaxis
- El soporte en los navegadores está mejorando
Sintaxis
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.wrapper div {
-webkit-box-flex: 1;
-webkit-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0;
}
Sintaxis
- Para Sass podemos usar los mixins de Brian Franco
- Con Post CSS podemos usar Autoprefixer
Properties for the Parent
(flex container)
flex
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
/* flex: 0 0 auto; */
}
Item
Item
Item
Item
Item
Item
flex
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 1 0 auto;
}
Item
...
Item
Item
Item
inline-flex
.flexcontainer-inline {
display: inline-flex;
}
.flexcontainer-inline div {
flex: 1 0 auto;
}
Item
...
Item
Item
Item
flex-direction
.flexcontainer {
display: flex;
flex-direction: row;
/* row | row-reverse | column | column-reverse */
}
.flexcontainer div {
flex: 1 0 auto;
}
Item
...
Item 1
Item 2
Item 3
flex-direction
.flexcontainer {
display: flex;
flex-direction: row-reverse;
/* row | row-reverse | column | column-reverse */
}
.flexcontainer div {
flex: 1 0 auto;
}
Item
...
Item 1
Item 2
Item 3
flex-direction
.flexcontainer {
display: flex;
flex-direction: column;
/* row | row-reverse | column | column-reverse */
}
.flexcontainer div {
flex: 1 0 auto;
}
Item 1
Item 2
Item 3
flex-direction
.flexcontainer {
display: flex;
flex-direction: column-reverse;
/* row | row-reverse | column | column-reverse */
}
.flexcontainer div {
flex: 1 0 auto;
}
Item 1
Item 2
Item 3
flex-wrap
.flexcontainer {
display: flex;
flex-wrap: nowrap;
/* nowrap | wrap | wrap-reverse */
}
.flexcontainer div {
flex: 1 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
flex-wrap
.flexcontainer {
display: flex;
flex-wrap: wrap;
/* nowrap | wrap | wrap-reverse */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
flex-wrap
.flexcontainer {
display: flex;
flex-wrap: wrap-reverse;
/* nowrap | wrap | wrap-reverse */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Alineación de los elementos
justify-content
.flexcontainer {
display: flex;
justify-content: flex-start;
/* flex-start | flex-end | center | space-between | space-around */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
justify-content
.flexcontainer {
display: flex;
justify-content: flex-end;
/* flex-start | flex-end | center | space-between | space-around */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
justify-content
.flexcontainer {
display: flex;
justify-content: center;
/* flex-start | flex-end | center | space-between | space-around */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
justify-content
.flexcontainer {
display: flex;
justify-content: space-between;
/* flex-start | flex-end | center | space-between | space-around */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
justify-content
.flexcontainer {
display: flex;
justify-content: space-around;
/* flex-start | flex-end | center | space-between | space-around */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
alinear elementos en el eje transversal
align-items
.flexcontainer {
display: flex;
align-items: flex-start;
/* auto | flex-start | flex-end | center | baseline | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
align-items
.flexcontainer {
display: flex;
align-items: flex-end;
/* auto | flex-start | flex-end | center | baseline | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
align-items
.flexcontainer {
display: flex;
align-items: center;
/* auto | flex-start | flex-end | center | baseline | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
align-items
.flexcontainer {
display: flex;
align-items: baseline;
/* auto | flex-start | flex-end | center | baseline | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
align-items
.flexcontainer {
display: flex;
align-items: stretch; /* auto */
/* auto | flex-start | flex-end | center | baseline | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
align-content
.flexcontainer {
display: flex;
align-content: stretch;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: flex-start;
align-content: flex-start;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: flex-start;
align-content: flex-end;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: flex-start;
align-content: center;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: flex-start;
align-content: space-between;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: flex-start;
align-content: space-around;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
align-content
.flexcontainer {
display: flex;
align-items: stretch;
align-content: stretch;
/* flex-start | flex-end | center | space-between |
space-around | stretch */
}
.flexcontainer div {
flex: 0 0 auto;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Properties for the Children
(flex items)
order
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 0 0 auto;
}
.flexcontainer div:nth-child(2) {
order: -1;
}
Item 1
Item 2
Item 3
Item 4
flex-grow
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 0 0 auto;
}
.flexcontainer div:nth-child(2) {
flex-grow: 2; /* default 0 */
}
Item 1
Item 2
Item 3
Item 4
flex-grow
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 0 0 auto;
}
.flexcontainer div:nth-child(2) {
flex-grow: 2;
}
.flexcontainer div:nth-child(4) {
flex-grow: 4;
}
Item 1
Item 2
Item 3
Item 4
flex-shrink
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 1 0 30%;
}
.flexcontainer div:nth-child(2) {
flex-shrink: 2;
}
.flexcontainer div:nth-child(4) {
flex-shrink: 4;
}
Item 1
Item 2
Item 3
Item 4
flex-basis
.flexcontainer {
display: flex;
}
.flexcontainer div {
flex: 1 0 15%;
}
.flexcontainer div:nth-child(2) {
flex-basis: 50%;
}
Item 1
Item 2
Item 3
Item 4
flex
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
This is the shorthand for flex-grow, flex-shrink & flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.
align-self
.flexcontainer {
display: flex;
align-items: flex-start;
}
.flexcontainer div {
flex: 0 0 auto;
}
.flexcontainer div:nth-child(3) {
align-self: flex-end;
/* auto | flex-start | flex-end | center | baseline | stretch */
}
Item 1
Item 2
Item 3
Item 4
Calculando el espacio disponible
Available space = (container size - flex-basis siblings total)
Grow unit = (Available space / Sum Grow siblings total)
Flex item size = (Flex basis + (Grow Unit * num))
layouts
layouts
recursos
Gracias
Joan Leon