Flexbox Layout: ¿Una alternativa a Bootstrap?

Bien. No es hora de meternos con Bootstrap porque no seríamos justos.

Gracias a Bootstrap muchos hemos conseguido crear páginas webs sin tener que picar manualmente muchas características CSS que siempre han sido un dolor de muelas.

La única queja que podemos poner a Bootstrap es que ha sido tal su éxito, que muchas webs se han diseñado bajo sus reglas y hemos perdido diversidad en el universo WWW.

Recordemos cuando todos los chicos llevábamos el pelo a tazón o cuando todos queríamos ir con unas Air Jordan. Eran lo más. Lo que se llevaba.

La verdad es que siempre existían alternativas a aquellas modas y algunos rebeldes se salían de la pauta establecida. Podías raparte la cabeza, dejarte melena o calzar unas Adidas.

Volviendo a CSS y dejando atrás la moda juvenil….

Existe otra manera de conseguir una web responsive sin utilizar Bootstrap y además disfrutar del proceso de ubicar nuestros elementos en el espacio de nuestra página.

Hace un par de años comencé a utilizar para algunos proyectos un tipo de layout que se denomina FlexBox y que es un auténtico melocotonazo.

Con un par de líneas CSS, logramos solventar problemas de disposición y orientación que siempre suponían una pesadilla para los desarrolladores.

FlexBox se basa en un sistema de coordenadas que distribuye los elementos hijos de una capa o div que marquemos como flexible a lo largo y ancho de sus ejes.

¿Cómo creamos un div flexible? Tan sencillo como añadir esta regla CSS a su estilo:

.capa-flexible{  

    display: flex;

}

Todos los elementos hijos del div que contenga la clase “capa-flexible” comenzarán a comportarse de una forma nueva, rompiendo el flujo normal de posicionamiento que los elementos de tipo div llevan por defecto en nuestro navegador (display: block).

Algunos de vosotros pensaréis… ¡menuda filfa! Os pido paciencia..

Hay cosas que se pueden cambiar como por arte de magia gracias a Flexbox.

Podemos volver a dibujar nuestros elementos en formato columna añadiendo a nuestro estilo padre una nueva propiedad CSS llamada flex-direction:

.capa-flexible{                

  display: flex;

  flex-direction: column;

}

 

Esta propiedad acepta varios valores. El valor por defecto es row y el del ejemplo column.

Que nadie se lleve a engaño. No es que nuestros elementos hayan cambiado de eje de posicionamiento, sino que el eje ha rotado 90 grados en sentido agujas del reloj.

Esto tiene gran importancia si queremos aprender bien como funciona Flexbox y no volvernos locos jugando con sus características.

¿Por qué no dibujar nuestras cajas al revés sin tocar una sola coma del código HTML?

Aquí podemos utilizar otros dos valores de la propiedad flex-direction: column-reverse y row-reverse.

Para que vayáis jugando con Flexbox, no quiero saturar vuestras tiernas cabezas de aprendices de web developers o  aburriros con conceptos que quizás ya sabéis si sois desarrolladores más avanzados.

Cierro esta entrada con otra propiedad que para mí resulta la leche en escabeche: justify-content.

Esta regla coloca los elementos contenidos en el contenedor flexible abarcando su espacio de forma muy útil en una web moderna basada en un grid:

  1. flex-start – Todos los elementos irán alineados al inicio de la misma.
  2. flex-end – Todos los elementos se alinean al final del div padre.
  3. center – Los elementos se alinean en el centro de la capa.
  4. space-between – Los elementos se distribuyen con un espacio equitativo entre ellos.
  5. space-around – Igual que space-between, pero añadiendo un espacio en los extremos.

Espero que Flexbox os haya resultado tan atractivo como a mí. En otras entradas seguiré hablando de ello y presentándoos otras características de este interesante layout CSS3.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Crea un sitio web o blog en WordPress.com

Subir ↑

Crea tu página web en WordPress.com
Empieza ahora
A %d blogueros les gusta esto: