FlexBox

in hive-185836 •  4 years ago 

FlexBox es una propiedad de CSS que nos facilita el trabajo a la hora de maquinar nuestra pagina Web. Anteriormente se usaban los códigos como: (Float, Position, etc.). Estos códigos eran mucho mas complicados de usar cuando se trataba de darle vida a una pagina Web.

Flexbox viene de “Flexible Box Layout“, lo que se traduce como “Diseño de caja flexible“, esto nos permite crear elementos flexibles que se adaptan a un contenedor automáticamente, los podemos controlar con parámetros como la alineación, dirección, filas o columnas.

Verán un ejemplo en el que voy a crear una caja padre llamada "container" y otras 5 cajas hijo llamadas "box".

ejemplo 1.png

ejemplo 2.png

En este caso no vamos a ver sobre detalles de diseño sino de tamaño.
Así es como se ve sin flexbox:

resultado 1.png

En este proximo ejemplo añadiremos "display: flex;" en la caja padre que es "container" y una anchura de 25% a los hijos.

ejemplo 3.png

Este será el resultado:

resultado 2.png

Como no había definido la dirección ni el tamaño que tendrían los elementos de nuestros "container" al definir la anchura de 25% a los hijos ellos automáticamente se adaptan al tamaño de su padre que es el 100% de la anchura que es la suma de todo. Este es el comportamiento "flexible" como lo indica su nombre "FlexBox".

Ejemplo con diseño:

resultado 3.png

resultado 4.png

Gracias por su atención!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!