Display: flex

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

Display: flex

Display: flex . -Comenzamos esta última parte del anexo dedicado a la maquetacion web y el Diseño web, con algo que va más allá de una mera propiedad css, display: flex, es todo un modelo de layout que conocemos como como modelo Flexbox, o tambien se le conoce con modelo de cajas flexibles.

Como esta recogido en su estandar oficial la w3c, dice que es un modelo de caja de CSS optimizado para el diseño de la interfaz de usuario. En el modelo Flexbox, los elementos secundarios de un contenedor flexible se pueden colocar en cualquier dirección y pueden “flexionar” sus tamaños, ya sea para rellenar el espacio no utilizado o contraerse para evitar desbordar al elemento principal. Tanto la alineación horizontal como la vertical de los hijos se pueden manipular fácilmente. La anidación de estos recuadros (horizontal dentro de vertical, o vertical dentro de horizontal) se puede usar para crear diseños en dos dimensiones.

El modelo de caja flexbox

El modelo de cajas flexibles flexbox y su principal propiedad, display: flex, pese a su juventud tiene soporte para todos los navegadores modernos incluso desde versiones mas antiguas de estos, salvedad como no de Internet explorer 9 y 8 que como siempre van a su aire.

compatibilidad flexbox

Como decimos, el modelo Flexbox va mucho mas alla de poner display: flex y que se cree la magia, por seo, necesitamos comprender a fondo la teoría que hay detrás de ese display: flex, para sacarle el mayor provecho posible.

Flexbox es un nuevo modelo de caja, osea es un set de algoritmos que determinan el tamaño y la posición de los elementos dentro de una composicion web. Ademas de determinar tambien el comportamiento con respecto a sus hermanos, padres etc.

Como decimos, cuando aplicamos ese famoso display: flex, vamos a poder hacer cosas como:

  • Alinear elementos en sentido horizontal o vertical
  • Cambiar el orden de aparicion de los elemntos en el navegador
  • Ajustar dimensiones de los elementos
  • Cambiar la direccion de los elementos, hacia arriba, hacia abajo, derecha o izquierda
  • Y alinear los elemntos respecto a padres y hermanos

display: flex
Trabajando con padres y hermanos

Antes de trabajar con Modelos de cajas flexibles o como se le conoce tambien, display: flex, hay que tener muy claro los conceptos de ‘padres’, ‘hermanos’ y ‘estar dentro de’, en HTML5, ya que esto influye determinantemente en el comportamiento de display: flex, que, como norma general, diremos que display: flex, se asigna al padre, al que llamaremos flex-container, esto hace que sus hijos directos se conviertan en flex-items y puedan manipularse con flexbox. Esto no impide que existan propiedadees que aplican al flex-container y otras que aplican a los flex-items, como veremos más adelante.

Veamos ahora un ejemplo de ‘padres’, ‘hermanos’ y ‘estar dentro de’ para ilustrar este tipo de jerarquía en Html5

Hemos hecho esta estructura un poco subrealista para para poder explicar estos conceptos:

  1. El div ‘padre_uno’, es padre de 3 divs llamados ‘hijo_padre_uno’
  2. Los div llamados ‘hijo_del_hijo_padre_uno’, no son hijos de ‘padre_uno’, solo estan dentro de ‘padre uno’
  3. Los 3 div llamados ‘hijos_padre_uno’ son hermanos entre si
  4. Los 2 div llamados ‘hijo_del_hijo_padre_uno’, no son hermanos entre si
  5. El primer div llamado ‘hijo_del_hijo_padre_uno’ y el llamado ‘otro_div’, si son hermanos entre si

Esta jerarquia es la misma que usamos para css y JavaScript asi, podriamos escribir algún ejemplo:

Display: flex
flexbox y flexitems

Para comenzsar a trabajar vamos a crear una estructura muy sencilla a la que le daremos estilos básicos para verla correctamente asi:

Como vemos hay una estructura en la que tenemos un contenedor que hemos llamado ‘padre’ que encierra a todos los demas divs que he llamado ‘hijo’,esto es muy importante si trabajamos con display: flex, ya que practicamente todas las propiedades se darán a este contenedor que pasará a ser un flexbox, ‘contenedor flexible’ y sus hijos se convertirán en flexitems, recibiendo ellos todas las propiedades que le le demos al padre

Para ver el funcionamiento mas claro vamos a dar estilos simples a este ejemplo asi:

Siendo esta su salida inicial en el navegador

punto partida display flex

Comenzamos a trabajar con el modelo de cajas flexbox agregando al div padre display: flex, con esto le estamos diciendo que queremos que esta caja se convierta en flexbox y que sus hijos se conviertan en flexitems, asi.

Este es el resultado al guardar:

solo flex

Como vemos los que han cambiado han sido los flexitems osea los hijos del div al que le hemos dado la propiedad display: flex, convirtiendose en elementos flexibles que ocupan todo el ancho del contenedor y toto el alto de este, sea cual sea uno y otro, siempre y cuando no especifiquemos un alto o un ancho definido.

En el ejemplo anterior los hijos ocupan todo el alto del padre ya que yo no les he dado altura, sin embargo no ocupan todo el ancho ya que si le hemos dado un ancho especifico de 100px a cada uno, para explicar la siguiente propiedad vamos a darles un alto a los hijos, asi.

flex con alto hijos

En el siguiente capitulo repasaremos el reto de las propiedades que conforman este modelo de cajas flexibles

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 *