Coding

#GeekStuff: Utilizando Flexbox para alinear elementos en CSS

Flexbox es una propiedad y/o técnica de CSS3 que ha estado ganando mucha popularidad este año entre varios desarrolladores debido a lo fácil que nos solucionó los dolores de cabeza al momento de querer posicionar elementos enseguida de otros (p. ej. un main al lado de un aside).

Gracias a las bondades de flexbox es sumamente sencillo alinear y posicionar los elementos que queramos, a continuación les muestro un ejemplo sencillo:

     <div class="container">
          <main>Aquí va algo</main>
          <aside>Aquí va algo también</aside>
     </div>
  

Le damos estilos dummy a ese markup para notar los cambios:

    .container {
      background-color: blue;
      padding: 5px;
    }

    main {
      background-color: green;
      min-height: 300px;
    }

    aside {
      background-color: yellow;
      min-height: 300px;
    }
  

Luego le asignamos al .container (el contenedor de nuestros elementos) la propiedad display: flex; para indicar que ese elemento y cada elemento hijo utilizará la propiedad flexbox, esto quiere decir que tanto .container como main y aside serán elementos flex.

    .container {
      background-color: blue;
      padding: 5px;
      display: flex;
    }
  

Esto hará que main y aside se pongan uno al lado del otro, pero la cosa no termina ahí, también podemos especificar que tanto espacio queremos que cada elemento dentro de .container ocupe:

    main {
      background-color: green;
      min-height: 300px;
      flex: 2;
    }

    aside {
      background-color: yellow;
      min-height: 300px;
      flex: 1;
    }
  

El código de arriba hará por ejemplo que main ocupe 2/3 del espacio disponible en .container y aside ocupará el 1/3 restante. ¿Por qué tercios?, porque si sumamos los valores flex que le dimos a tales elementos nos da 3 como resultado, main ocupará 2/3 y aside 1/3. Pueden ser los valores que sean, no importa, por ejemplo:

    main {
      background-color: green;
      min-height: 300px;
      flex: 4;
    }

    aside {
      background-color: yellow;
      min-height: 300px;
      flex: 2;
    }
  

En el código de arriba main ocupará 4/6 del espacio disponible y aside 2/6 del espacio disponible. Todo esto posicionando a main y a aside uno enseguida del otro.

¿Es mejor que usar float: left; y float: right; no creen?

Flexbox funciona de manera correcta en navegadores modernos, pueden revisar la compatibilidad completa aquí.

Los invito a experimentar cómo funciona flexbox usando el ejemplo que aquí les pongo, verán que se podrán ahorrar muchos dolores de cabeza y sobre todo, ahorrarán mucho tiempo en su workflow.

• Kudos

• ¡Nuevo!

Comentarios