Repasamos los principales conceptos de Flexbox

Como vimos en ¿Qué aporta Flexbox a CSS3?, Flexbox es un mecanismo de CSS3 que multiplica las posibilidades de maquetación web y nos facilita la composición del diseño. Vamos a comenzar una serie de artículos prácticos sobre Flexbox, pero antes vamos a explicar hoy algunos conceptos imprescindibles de esta herramienta, que nos obligará a pensar diferente en algunos momentos, e incluimos un ejemplo práctico que nos ayudará a descubrir todas sus posibilidades.

Contenedor e items

En Flexbox tenemos estas dos partes diferenciadas: el contenedor y los ítems o elementos que están dentro de él. En el contenedor principal podremos elegir qué elementos queremos tanto en  horizontal como en vertical. En los ítems, podremos indicar cosas como el tamaño que deben ocupar en relación a otros o el orden en el que deben aparecer.

Los ejes en Flexbox

Los dos ejes que tenemos en Flexbox son el horizontal y el vertical (principal y secundario, respectivamente). El horizontal es el que viene por defecto.

Si queremos alinear un texto deberemos de utilizar los conceptos de inicio y fin (start / end).

Dimensiones del contenedor

Como es habitual en HTML, con width y height definiremos las dimensiones en cuanto anchura y altura, aunque también dependerá de cuál sea su eje principal.

Ejercicio práctico con Flexbox

Con el siguiente ejercicio, y a partir de un HTML básico, comenzaremos a ver todos estos conceptos.

<section>
   <article>1</article>
   <article>2</article>
   <article>3</article>
   <article>4</article>
 </section>

Lo siguiente es un CSS sencillo en el que definimos  el color y la separación de los elementos.

body {
   font-size: 2em;
   font-family: sans-serif;
   color: #666;
 }
 article {
   background-color: #678bab;
   margin: 5px;
   padding: 3px;
 }

Este ejercicio representará algo así:

Con el atributo display comenzaremos a aplicar valores de Flexbox en el contenedor principal (section).

section {
   display: flex;
 }

Al añadir eso, los elementos que tenemos en el contenedor se colocan en la página de una manera diferente a como lo teníamos antes de aplicar Flexbox.

El eje que tenemos predeterminado es el horizontal, ya que al no haberle indicado nada toma ese por defecto, aunque vamos a señalarle, con el atributo flex-direction, que los elementos se coloquen uno debajo de otro.

section {
   display: flex;
   flex-direction: column;
 }

El resultado es el que puedes ver a continuación:

Ahora vamos a distribuir los elementos, para que se distribuyan de manera uniforme en el espacio del contenedor, sobre el eje horizontal. Para ello, modificamos el código de la siguiente manera:

section {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
 }

Con flex-grow, y para terminar con este contacto preliminar con Flexbox, intentaremos hacer que los elementos tengan un ancho que haga que ocupen todo el espacio disponible en el eje principal. Debemos de tener en cuenta que la siguiente propiedad no depende del contenedor, sino de los elementos internos.

article {
   background-color: #678bab;
   margin: 5px;
   padding: 3px;
   flex-grow: 1;
 }

Como podemos observar en la imagen, los elementos son exactamente iguales porque tienen el mismo valor flex-grow.

En próximos artículos seguiremos profundizando con detalle en todas las propiedades de Flexbox.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *