Flexbox

Flexbox
Curso básico de Maquetación Web

Flexbox

Flexbox. -Ya vimos en último capitulo, cuales eran las principales caracteristicas del modelo de cajas Flexbox así como su principal propiedad display:flex que era la que convertía al padre, al contenedor que ‘contenia’ valga la redundancia, los elementos a maquetar, en una caja Flexbox, y a los hijos en flexitems

Para mostrar su comportamiento partimos del modelo que estamos usando para trabajar hasta ahora este es su html:

y este su css

Y esta su salida en web:

flex con alto hijos

Flexbox
Propiedad justify-content

Esta propiedad nos va a permitir controlar la alineacion de los elementos en horizonal, asi como la distribución del espacio sobrante si es que lo hubiera, tiene 5 valores posibles que pasamos a ver a continuacion:

  • flex-start, Es el valor por defecto de justify-content y perimte alinear todos los elementos al ‘inicio’ del contenedor asi:

    flex-start
  • flex-end, con este valor justify-content, alinea en horizontal pero ‘al final’ del contenedor conservando el orden de los elementos asi:

    flex-end
  • center, con este valor vamos a poder centrar los hijos con respecto al ancho del padre asi:

    center
  • space-around, este valor divide el ancho del contenedor padre y coloca todos los hijos dejando en mismo espacio en blanco al principio y al final de cada hijo como su nmbre inidica ‘espacio alrededor’ de cada uno de los hijos asi:

    space-around
  • space-between, hace practicamente lo mismo solo que el primer elemento y el último los coloca al principio y al final dejando solo el espacio ‘entre ellos’, entre todos los hijos asi:

    space-between

Flexbox
Propiedad align-items

Esta propiedad Flexbox alinea en vertical los flexitems, tiene 5 valores posibles

  • flex-start, perimte alinear todos los elementos al ‘inicio’ del contenedor pero esta vez en vertical asi:

    align-items: flex-start

  • flex-end, perimte alinear todos los elementos al ‘final’ del contenedor en vertical por supuesto

    align end
  • center, perimte alinear todos los elementos centrandolos en vertical

    align center
  • stretch, fuerza que los hijos tomen la altura completa del padre siempre que estos no tengan una altura definida, este es el valor por defecto de align-items, asi si en nuestro ejemplo comentamos el alto de los hijos y damos align-items: stretch, queda asi:

    stretch

    Esta propiedad resulta muy util en muchos tipos de diseño web en la actualidad, por ejemplo al querer que una barra lateral de un blog tenga el mismo alto que la seccion principal aunque esta no tenga el mismo contenido.

  • baseline, esta propiedad permite que la alineacion sea en funcion de la linea que formarían todos los elementos de texto de los flexitems, es un poco rara de explicar pero vamos a verla forzando un font-size mayor para uno de los hijos.

    baseline

    Como vemos al agrandar la salida en el navegador todos los elementos se alinean a partir de la linea imaginaria que pasa por todas las bases de las fuentes

La propiedad align-items, trabaja como hemos visto hasta ahora siempre que los elementos se mantengan en una sola linea, si los elementos estan en varias lineas va a funcionar de la siguiente manera.

Primero divide en padre en tantos espacios iguales como lineas tenga que crear para acomodar sus elementos para luego alinear cada linea de elementos en vertical con respecto a ese espacio creado para cada linea lo vemos:

dos lineas

Como vemos al no haber suficiente ancho para estar los cuatro hijo en una sola fila y tener que ponerlos en dos, lo que hace es dividir el padre en dos espacios iguales alineando en vertical cada una de las filas con respecto a cada uno de ellos poniendo ‘flex-start’ osea al principio cada una de las filas creadas

Flexbox
Propiedad align-content

Esta propiedad alinea los elementos en vertical realmente independientemente de lsa filas de elemetos que se formen.

El mismo ejemplo anterior ahora con align content.

align content

Ahora la alineacion no depende del numero de filas.

Los valores posibles de align-content son los mismos de justify-content y su funcionamiento es igual solo que alinea en vertical. flex-end, flex-start, center, space-around y space-between

Flexbox
Propiedad flex-wrap

Flex-wrap, controla el comportamiento de los flexitems, en tanto en cuanto va ser capaz de decidir como va a ser el comportamiento de estos en caso de no poder ser acomodados en el ancho del ‘padre’ cuando la suma de sus anchos es mayor que el espacio disponible en este:

Si cambiamos el ancho de los hijos en nuestra Diseño web de ejemplo de manera que no sea posible su acomodo en en el flexcontainer que recordamos es el padre al que le hemos dado las propiedades flexbox ocurrirá esto:

no-wrap

Como vemos aunque la suma de sus anchos ‘300px ‘es mayor que el ancho del padre lo adaptan para no salirse de el, es aqui cuando entra en juego flex-wrap con sus tres valores posibles:

  • no-wrap, es el valor por defecto, osea si no ponemos explicitamente un flex-wrap esto sería igual que poner ‘flex-wrap: no-wrap’, con este valor los hijos se adaptaran al ancho del padre si es que la suma de sus anchos es mayor que la del padre

    no-wrap
  • wrap, con este valor la propiedad flex-wrap, hara que los flexitems (los hujos), ocupen su ancho real haciendo haciendo que los elementos que no caben ‘salten’ debajo asi:

    wrap
  • wrap-reverse, con este valor la propiedad flex-wrap, es similar a la anterior en cuanto al comportamiento de los elementos en funcion del tamaño, con la salvedad del orden en los que los elementos ‘saltan’ estos lo van a hacer en orden inverso por cada fila que se genere, ademas de invertir tambien el orden de alineacion en vertical con ‘align-items’ ahora ‘align-items: flex-start’, pasará a ser al final en lugar de al principio y viceversa con ‘flex-end’, asi

    wrap-reverse

Y esto es todo en lo que respecta a la propiedad flexbox flex-wrap

Flexbox
Propiedad flex-direction

Flex-direction, esta propiedad nos permite determinar la dirección en la que se van a posicionar nuestros flexitems y tenemos estas posibilidades:

  • row: Es el valor por defecto y como su nombre indica es en linea mas concretamente en fila

    flex con alto hijos
  • row-reverse: Con este valor todas las propiedades que tengan que ver con la alineacion en horizontal basicamente justify-content, pasan a valer justo lo contrario asi, justify-content, vale flex-start, osea ‘al principio’, ahora con row-reverse pasa a valer flex-end, osea ‘al final’, invirtiendo además el orden, asi:

    row-reverse
  • column: Con esta propiedad podemos poner los hijos en columnas una debajo de otra asi:

    flex-direction column

    Cuando usamos esta propiedad se invierten los valores de juastify-content y align-items, pasando justify-content a alinear en vertical y align-items ahora alinea en horizontal.

  • column-reverse: Con esta propiedad pasa algo similar a row-reverse, ya que altera la alineacion en vertical, pasando lo que vale flex-start, ‘al inicio’ a ‘al final’ y viceversa justifiy-content, recordamos que con flex-direction:column alineaba en vertical pasa de ser su valor por defecto flex-start que es ‘al principio’ a valer ‘al final’ invirtiendo además el orden, asi:

    column-reverse

Flexbox
Propiedad flex-flow

La propiedad flexbox flex-flow es la abreviatura o un atajo por asi decirlo que resulta de la combinacion de flex-direction y flex-wrap asi podriamos poner esto

flex-flow

lo cual sería lo mismo que decir esto otro

Y vemos que su salida en la web es la misma:

flex-flow

Con esto terminamos las propiedades flexboxque afectan al flexcontainer en el último capitulo veremos las propiedaes que afectan a los flexitems

Capítulos del curso

Maquetación Web

1 julio, 2018
Flexbox

Flexbox
Curso básico de Maquetación Web

Flexbox. - Capitulo 5 del Curso básico de Maquetación Web, en el que veremos las propiedades del modelo de cajas Flexbox ☎ 689 89 42 67
1 julio, 2018
Display: flex

Display: flex
Curso básico de Maquetación Web

Display: flex. - Capitulo 4 del Curso básico de Maquetación Web, en el que veremos en profundidad el modelo de cajas flexibles Flexbox ☎ 689 89 42 67
11 junio, 2018
float maquetar

Float
Curso básico de Maquetación Web

Float. - Capitulo 3 del Curso básico de Maquetación Web, La Maquetación web con float, con sus pros y contras. Pasemos a verlo en profundidad ☎ 689 89 42 67
18 abril, 2018
inline-block

Display: inline-block
Curso básico de Maquetación Web

Segundo capítulo del Curso básico de Maquetación Web, dedicado a la Maquetación web con display: inline-block, un método tradicional de maquetar que vamos a intentar tratarlo en profundidad
11 abril, 2018
curso basico de maquetacion web

Maquetación Web
Introducción a la maquetación web

Comenzamos este Curso básico de Maquetación Web, en el que veremos paso a paso desde cero que es la Maquetación Web, repasaremos conceptos generales de CSS, veremos el pasado, presente y futuro de la Maquetación Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *