#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.
-
Comentarios
- ¡Nuevo!