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.

http://demo.agektmr.com/flexbox/
http://the-echoplex.net/flexyboxes
http://flexboxin5.com/

 
 
 
Post By Rocio Muñoz (37 Posts)
Ingeniera Informatica.
Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador.

Trabajo como programadora en Cic en entornos Java.
Apasionada del mundo web y la innovacion social.
Connect