Flexbox, entendiendo las cajas flexibles
Uno de mis mayores dolores de cabeza en el trabajo, es el css … No hay manera de que las cosas se coloquen en el sitio que yo les pido … Algo asi como esa persiana y Peter Griffin …
Sin embargo, en mi ayuda han llegado las cajas flexibles o FlexBox
Qué es Flexbox
Flexbox es un nuevo módulo de css3 que nos permite colocar elementos en la web y que se comporten de forma «predecible» . Flexbox se utiliza para crear contenedores que se adapten a cualquier tamaño o dispositivo utilizado por el usuario.
Flexbox ha estado experimentando durante 3 años para mejorar la forma en la que posicionamos componentes en la web y durante este tiempo las especificaciones han cambiado bastante de sintaxis y de resultados. Sin embargo a dia de hoy, podemos decir que ya tenemos soporte para todos los navegadores modernos. Podeis comprobarlo compatibilidad en CanIUse
Conceptos Flexbox
Para poder entender como funciona Flexbox, primero tuve que comprender algunos conceptos, que os cuento a continuación:
- flex container: es el contenedor de FlexBox donde tendremos que alojar a sus hijos. Para definir algo como contenedor flex utilizamos «display:flex» o «display:inline-flex»
- flex item: son los elementos hijos que irán dentro del contenedor. Se comportarán en función de como hayamos definido el contenedor (flex o inline-flex
- main axis y cross axis: son los ejes del contenedor. Nos sirven para indicar la posición horizontal y la posición vertical de los elementos del contenedor
Ya solo nos quedan las direcciones y tamaños
- main start y main end: nos indica la dirección de los elementos en el eje horizontal
- cross start y cross end: nos indica la dirección de los elementos en el eje vertical
- main size: nos indica la anchura de un elemento
- cross size: nos indica la altura de un elemento
Ejemplo usando Flexbox
Vamos a ver un ejemplo con todos estos conceptos, que seguro que así quedan más claras las cosas. Imaginaos una galeria de imágenes bien colocadas en la pantalla.
Lo primero de todo hemos dicho que necesitamos un contenedor padre y unos hijos
Nuestro Html
<div class="padre"> <div class="hijo">Hijo 1</div> <div class="hijo">Hijo 2</div> <div class="hijo">Hijo 3</div> <div class="hijo">Hijo 4</div> </div>
Y lo mas importante nuestro css
.padre{ display:flex } .hijo{ border: 1px solid black; padding:10px }
Al contenedor padre le estamos indicando que tiene que ser flexible mediante la propiedad «display:flex». Los elementos que estén dentro de este contenedor se colocarán ocupando todos los espacios.
Veriamos 4 elementos que se colocarian y adaptarian a la pantalla usando el modelo de cajas flexibles
Vamos a sacarle más partido a flexbox y a alterar valores de los ejes, alineaciones, orden …
Propiedades del Contenedor Padre
Quiero que utilicen el eje principal (main axis) para que se muestren horizontalmente pero en orden inverso. Lo conseguimos alterando la propiedad «flex-direction»
.padre{ display:flex; flex-direction:row-reverse }
Y quiero cambiar la forma de alinear los elementos en el eje principal (main axis). Lo conseguimos alterando la propiedad «justify-content»
.padre{ display:flex; flex-direction:row-reverse; justify-content:flex-start; }
Propiedades de los Hijos
Voy a alterar ahora la anchura de los hijos. Esto lo conseguimos con la propiedad «flex-grow»
Quiero conseguir que unos elementos sean mas grandes que otros.
Html<div class="padre"> <div class="hijo peque">Hijo 1</div> <div class="hijo grande">Hijo 2</div> <div class="hijo peque">Hijo 3</div> <div class="hijo grande">Hijo 4</div> </div>Css.grande{ flex-grow:8 } .peque{ flex-grow:1 }Generadores FlexBox
Existen muchas más propiedades con las que podeis trabajar.
Os dejo algunas páginas con generadores online de flexbox y con las que podeis experimentar y visualizar resultados.
No comments yet.