flex
para la propiedad display
de CSS y un conjunto de nuevas propiedades de CSS como justify-content
, align-items
y flex-direction
, entre otros.div
separados por espacios iguales (consulta el HTML y CSS haciendo click en la pestaña respectiva):display: flex
al contendor. Por ejemplo, si el contenedor tiene clase container
definiríamos la siguiente regla CSS:flex-direction
, flex-wrap
, justify-content
y align-items
sobre el contenedor.flex-direction
que puede tener alguno de los siguientes valores:row
: es el valor por defecto, los ítems se posicionan de izquierda a derecha.row-reverse
: los ítems se posiciónan de derecha a izquierda.column
: los items se posicionan verticalmente, de arriba hacia abajo.column-reverse
: los ítems se posicionan verticalmente, de abajo hacia arriba.row-reverse
:flex-direction
para experimentar.flex-wrap
puedes modificar este comportamiento. Los valores que puede recibir flex-wrap
son:no-wrap
: es el valor por defecto, los ítems se salen del contenedor si no hay espacio.wrap
: los ítems se posicionan en nuevas filas si no hay espacio.wrap-reverse
: similar a wrap
pero en vez de agregar filas debajo, se agregan encima.flex-direction
a column
o column-reverse
, los ítems se ubican en nuevas columnas, no filas, cuando utilizas el valor wrap
o wrap-reverse
.wrap
a flex-wrap
:justify-content
sobre el contendedor. Los posibles valores son:flex-start
: es el valor por defecto, los items se alínean a la izquierda del contenedor.flex-end
: los ítems se alínean a la derecha del contenedor.center
: los ítems se alínean en el centro del contenedor.space-between
: los ítems se separan por espacios iguales ocupando todo el contenedor (los ítems de los extremos se ubican en los extremos del contendor).space-around
: los ítems se distribuyen uniformemente en el contenedor.space-around
se ve de la siguiente forma:flex-direction
a column
o column-reverse
, justify-content
se utiliza para alinear los ítems de forma vertical (por eso se utiliza flex-start
y flex-end
en vez de left
y right
).align-items
sobre el contenedor. Los posibles valores son:stretch
: el valor por defecto, los ítems se estiran para ocupar todo el espacio vertical.flex-start
: los ítems se alínean en la parte superior del contenedor.flex-end
: los ítems se alínean en la parte inferior del contendor.center
: los ítems se alínean en el medio del contendor.baseline
: se posicionan con respecto a la línea base del texto del contenedor.flex-end
se ve de la siguiente forma cuando los ítems tienen diferentes tamaños:flex-direction
a column
o column-reverse
, align-items
se utiliza para alinear los ítems de forma horizontal (por eso se utiliza flex-start
y flex-end
en vez de top
y bottom
).justify-content
y align-items
.order
, flex-grow
, flex-shrink
, flex-basis
, flex
y align-self
:order
te permite cambiar el orden de los ítems en un contenedor.flex-grow
te permite incrementar el tamaño de un item con respecto a los demás.flex-shrink
te permite definir cuánto se va a encoger un ítem con respecto a los demás cuando el espacio es reducido.flex-basis
te permite definir el ancho de un ítem.flex
es un atajo para definir las propiedades flex-grow
, flex-shrink
y flex-basis
de un ítem.self-align
permite sobrescribir el valor de la pripiedad align-items
del contenedor.