Flexbox

La propiedad "flexbox" permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaós de pantalla y diferentes dispositivos. Para ello se usa "display:flex;" Por ejemplo:

1
2
3
4
5

Las distintas propiedades que puede tener una "flexbox" Son las siguientes:

la dirección

Esta propiedad nos permite establecer el eje principal con "flex-direction", permitiendonos que se muestre en forma de columna o de fila.


Uso del espacio cuando no rellena todo el eje principal

Cuando no se llega ha usar todo el espacio en una "flexbox" la propiedad "justify-content" nos permite variar es espacio que queda, podiendo llevarlo a 0 o lo maximo posible o simplemente colocar todos los objetos en la derecha o izquierda. Los distintos valores que puede tener son los siguientes:



especificar el alineamiento de los objetos

Sirve para especificar el alineamiento dentro de de la "flexbox". Se usa el "align-items". Puede tener los distintos valores:



indicar la dirección de los objetos y cuales objetos se agrupan

La propiedad "flex-flow" une "flex-direction" y "flex-wrap"en una sola, facilitando el uso. Al ser un mezcla de dos, sus valores se dividen en dos partes. La sintaxis de esta propiedad es: "flex-flow: flex-direction flex-wrap";. Los valores de de ambos son: Por una parte "flex-direction", que se coloca en primera posición:

Por otra "flex-wrap":

Debido a la cantidad de posibilidades que permite esta propiedad solo pondré dos ejemplos, las otras se pueden encontrar en el siguiente enlace.


Esto son los principales atributos de las "FlexBox". Existen algunos más pero puede ser suplidos por algunos de los aquí mencionados. Aunque si aún se desea inverstigar aun más profundo, o si se tiene dudas, recomiendo que vea la siguiente pagina


Ir hacia arriba