Flexbox (Flexible Box Layout)

Flexbox viene de “Flexible Box Layout“, que se puede traducir como

“Diseño de caja flexible“.
Maquetación utilizando Flexbox
• Para comenzar a utilizar Flexbox añadimos al contenedor la
propiedad “display:flex”. VEAMOS LOS EJEMPLOS.
flex-direction:
• – flex-direction:row; -> Los elementos se visualizan de izquierda a
derecha.
flex-direction:
• – flex-direction:row-reverse; -> Los elementos se visualizan de
derecha a izquierda.
flex-direction:
• – flex-direction:column; -> Los elementos se visualizan de arriba
hacia abajo.
flex-direction:
• – flex-direction:column-reverse; -> Los elementos se visualizan de
abajo hacia arriba.
flex-wrap:
• – flex-wrap:nowrap; -> Los elementos se muestran en línea, en una
sola fila, y su tamaño se ajusta al contenedor siempre y cuando la
suma de todos ellos sea mayor o igual que el 100% de la anchura del
contenedor.
flex-wrap:
• – flex-wrap:wrap; -> Los elementos se muestran en línea, pero si su
anchura supera la del contenedor, se distribuyen en varias filas.
flex-wrap:
• – flex-wrap:wrap-reverse; -> Los elementos se muestran en línea,
pero si su anchura supera la del contenedor, se distribuyen en varias
filas, y además lo hacen en orden inverso al de maquetación.
flex-flow:
• flex-flow: <flex-direction> <flex-wrap>
justify-content:
• alineación horizontal de los elementos en Flexbox, alinea los
elementos a lo largo del eje principal (main axis) de su contenedor.
justify-content:
• – justify-content:flex-start; -> Alinea los elementos en horizontal
desde el inicio de la dirección del eje principal de su contenedor
(partiendo desde el inicio de la línea).
justify-content:
• – justify-content:flex-end; -> Alinea los elementos en horizontal
desde el final de la dirección del eje principal de su contenedor
(partiendo desde el final de la línea)
justify-content:
• – justify-content:center; -> Alinea los elementos al centro del eje
principal de su contenedor. Similar a un texto alineado al centro.
justify-content:
• – justify-content:space-between; -> Alinea los elementos
justificándolos a lo largo del eje principal de su contenedor. Similar a
un texto justificado. Los elementos laterales se pegan a los extremos
y el resto se distribuyen a lo largo del eje principal dejando el mismo
espacio entre ellos.
justify-content:
• – justify-content:space-around; -> Alinea los elementos
distribuyendo sus centros de forma horizontal a lo largo del eje
principal de su contenedor, dejando el mismo espacio lateral de
separación al comienzo, al final y entre ellos.
align-items | align-self | align-content:
• La alineación vertical se realiza a través del llamado “eje transversal”
(cross axis), y para ello contamos con tres propiedades diferentes,
“align-items”, “align-self” y “align-content”.
align-items | align-self | align-content:
• – “align-items” establece la alineación predeterminada para todos los
elementos del contenedor, incluidos los elementos independientes.
• – “align-self” permite alinear elementos independientes del
contenedor.
• – “align-content” alinea las líneas/filas de elementos de un
contenedor.
align-items | align-self | align-content:
• “align-items” nos sirve para alinear los elementos y “align-content”
para alinear las filas de éstos, mientras que “align-self” nos permite
alinear elementos de forma independiente.
align-items | align-self | align-content:
• – align-items:stretch; -> Valor por defecto. La altura de los elementos
se ajusta al tamaño del contenedor (o fila), dividiendo el espacio
sobrante entre todos los elementos por igual.
align-items | align-self | align-content:
• – align-items:flex-start; -> Alinea en vertical los elementos desde el
inicio de la dirección del eje transversal de su contenedor (al igual
que ocurría en horizontal). También afecta el valor de “flex-
direction” al sentido de la alineación vertical.
align-items | align-self | align-content:
• – align-items:flex-end; -> Alinea en vertical los elementos desde el
final de la dirección del eje transversal de su contenedor (al igual que
ocurría en horizontal).
align-items | align-self | align-content:
• – align-items:center; -> Alinea al centro vertical los elementos a lo
largo del eje transversal de su contenedor.
align-items | align-self | align-content:
• – align-items:baseline; -> Alinea en vertical las “líneas base” de los
elementos a lo largo del eje transversal de su contenedor. Para poder
comprender este ejemplo, vamos a añadir algunos estilos diferentes
a los elementos:
align-items | align-self | align-content:
• – align-content:stretch; -> Valor por defecto. La altura de las filas se
ajustan al tamaño del contenedor, dividiendo el espacio sobrante
entre todas las líneas por igual.
align-items | align-self | align-content:
• – align-content:flex-start; -> Alinea en vertical las filas desde el inicio
de la dirección del eje transversal de su contenedor.
align-items | align-self | align-content:
• – align-content:flex-end; -> Alinea en vertical las filas desde el final
de la dirección del eje transversal de su contenedor.
align-items | align-self | align-content:
• – align-content:center; -> Alinea al centro vertical las filas a lo largo
del eje transversal de su contenedor.
align-items | align-self | align-content:
• – align-content:space-between; -> Alinea las filas justificándolas a lo
largo del eje transversal de su contenedor. Similar a un texto
justificado en vertical. Las filas superior e inferior se pegan a sus
extremos y el resto se distribuyen a lo largo del eje transversal
dejando el mismo espacio entre ellas.
align-items | align-self | align-content:
• – align-content:space-around; -> Alinea las líneas distribuyendo sus
centros de forma vertical a lo largo del eje transversal de su
contenedor, dejando el mismo espacio vertical de separación en la
parte superior, inferior y entre ellos.
Las propiedades más
interesantes de
Flexbox
order:
• – order: -> Posiciona un elemento en el orden asignado por el
número entero especificado en la propiedad, teniendo en cuenta el
valor asignado al resto de elementos, cuyo valor por defecto es 0
(cero).
flex:
• la propiedad “flex” que se aplica a los elementos del contenedor y
que a su vez se estructura de tres propiedades diferentes y que se
pueden presentar por separado, “flex- grow”, “flex-shrink” y “flex-
basis”, y se define de la siguiente forma:
• – flex: none | <flex-grow> <flex-shrink> <flex-basis>
flex-grow:
• – flex-grow:<número>; -> Determina el factor de incremento de
tamaño de uno o varios elementos en relación al resto teniendo en
cuenta el espacio “vacío” o “libre” entre ellos. Como espacio
“vacío/libre” nos referimos al espacio que no ocupan los elementos
en relación a su fila. Cuando este valor se omite, se establece en 1.
flex-shrink:
• – flex-shrink:<número>; -> Determina el factor de disminución de
tamaño de uno o varios elementos en relación al resto teniendo en
cuenta el espacio “vacío” o “libre” entre ellos. Cuando este valor se
omite, se establece en 1.
flex-basis:
• – flex-basis: auto | 0 | <width> -> Especifica el tamaño principal
inicial de los elementos teniendo en cuenta el espacio “vacío” o
“libre” entre ellos.
• Cuando este valor se omite, se establece en 0. Esta propiedad hace
que, dependiendo del valor asignado, el tamaño “base” se interprete
como “todo el espacio” del elemento o como el “espacio sobrante”
del mismo.