Durante mucho tiempo para poder posicionar los elementos en una página html se han utilizado capas a base de CSS usando comunmente propiedades como float o position. Esta manera de posicionar funciona bien, pero muchas veces la forma en que lo hace es algo confusa o requiere atajos algo ilógicos.
Flexbox nos permite centrar el contenido dentro de su padre verticalmente y horizontalmente, lo hace además de una manera nativa en el navegador, sin tener que utilizar librerías de terceros como Bootstrap.
Os pongo un pequeño ejemplo de como funciona, pero iré escribiendo más posts sobre este tema.
Definimos la capa para aplicar Flexbox:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Definimos los estilos:
.flex-container {
display: flex;
}
Ya tenemos definida la capa para aplicarle Flexbox. Ahora tenemos que aplicar propiedades.
Por ejemplo vamos a organizar el contenido en filas:
.flex-container {
display: flex;
flex-direction: column;
}
Ahora lo vamos a organizar en columnas:
.flex-container {
display: flex;
flex-direction: row;
}
Podemos revertir la dirección:
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Continuaremos muy pronto. Espero que os sea de utilidad ^_^.
Comentarios