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:
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.
- div.dir{
display:flex;
flex-direction:row;
}
- div.dir2{
display:flex;
flex-direction:column;
}
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:
- justify-content: flex-start; Valor por defecto, se colocan al principio
- justify-content: flex-end; Los objetos se colocan al final
- justify-content: center; Los objetos se colocan en medio
- justify-content: space-between; Los objetos se colocan con espacio entre las lines
- justify-content: space-around; Los objetos se colocan con espacio antes,entre y despues de las lineas
- div.cont{
display:flex;
justify-content:flex-start;
}
- div.cont{
display:flex;
justify-content:flex-end;
}
- div.cont{
display:flex;
justify-content:center;
}
- div.cont{
display:flex;
justify-content:space-between;
}
- div.cont{
display:flex;
justify-content:space-around;
}
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:
- align-items:stretch; Rellenan el contenedor
- align-items:center; Se colocan en medio del contenedor
- align-items:flex-start; Se cololan al principio del contenedor
- align-items:flex-end; Se colocan al final del contenedor
- align-items:baseline; Se posicionan en la line base del contenedor
- div.align1{
display:flex;
align-items:stretch;
}
- div.align2{
display:flex;
align-items:center;
}
- div.align3{
display:flex;
align-items:flex-start;
}
- div.align4{
display:flex;
align-items:flex-end;
}
- div.align5{
display:flex;
align-items:baseline;
}
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:
- flex-direction:row ;
- flex-direction:row-reverse ;
- flex-direction:column ;
- flex-direction:column-reverse ;
- flex-direction:inital ;
Por otra "flex-wrap":
- flex-wrap:nowrap ;
- flex-wrap:wrap ;
- flex-wrap:wrap-reverse ;
- flex-wrap:initial;
Debido a la cantidad de posibilidades que permite esta propiedad solo pondré dos ejemplos, las otras se pueden encontrar en el siguiente enlace.
- div.flew1{
display:flex;
flex-flow:row-reverse wrap
border: 1px solid black;
}
- div.flew2{
display:flex;
flex-flow:column wrap-reverse;
border: 1px solid black;
}
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