Advertisement
  1. Web Design
  2. Web Development
Webdesign

Ejercicios en Flexbox: Componentes Web Sencillos

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial vamos a practicar la construcción de componentes web con dos ejercicios: vamos a usar Flexbox para crear un componente de "lista de thumbnails o miniaturas" y un componente "barra lateral".

Flex

En caso que no te hayas percatado, "El maquetado flexible" (Flexbox) es una prestación de CSS que proporciona una manera eficaz de maquetar, alinear y ordenar elementos en un contenedor dado. En asociación con Grid y otras especifiaciones conforma un modelo de maquetado más completo, en repuesta a floats y tablas y otras soluciones que los diseñadores web han estado utilizando en el transcurso de los años.

Con Flexbox, los elementos pueden ser colocados en cualquier dirección y pueden ajustar sus tamaños, ya sea creciendo para llenar el espacio inutilizado o achicándose para evitar salirse de su contenedor padre.

Ejercicio 1: Componente Lista de Miniaturas

Las listas son usadas para mostrar filas de información, como listas de reproducción, detalles del usuario o películas. A menudo, éstas listas contienen imágenes que conocemos como "thumbnails" o miniaturas. Alinear imágenes con métodos tradicionales puede ser un poco confuso e inconsistente, pero con Flexbox podemos aplicar estilo a un componente lista con CSS minimalista.

Para éste componente usemos un elemento <ul> con elementos de lista <li>:

Utilizaremos flexbox para crear el maquetado para nuestro .list-item, dando a cada uno dos elementos hijo directos así:

how flex-grow and flex-shrink behave
cómo Flex-shrink y flex-grow se comportan

Ésta figura ilustra cómo se comportan flex-shrink y flex-grow. El elemento .list-item_ _image nunca se va a ser más pequeño, y el .list-item_ _:content tomará el espacio restante en el contenedor li.

Ésta será la estructura HTML para cada uno:

Y el CSS básico se verá así:

Aquí está lo que nos dan éstos estilos básicos:


Verás que los avatares están posicionados a la izquierda, los detalles a la derecha.

Saqué los detalles del usuario de randomuser.me. Al agregar algún estilo extra (aplicar estilo al contenedor, esquinas redondeadas en las imágenes, tipografía básica, colores de fondo etc.) obtendremos ésto:

Puedes ver el CSS completo en CodePen y experimentar. Por ejemplo, si mueves .list-item_ _image después de .list-item_ _content en el HTML obtendrás una lista de miniaturas con imágenes en el lado derecho sin tener que usar ninguna clase o estilo adicional.

Ejercicio 2: Componente Barra Lateral

Muchos sitios web y aplicaciones web utilizan una barra lateral para navegación. En éste ejercicio vamos a crear un componente barra lateral reutilizable usando Flexbox.

El maquetado contiene tres partes principales:

  1. marcador de posición para el logo
  2. navegación
  3. bloque de perfil de usuario

Típicamente, la parte confusa de crear ésta clase de maqueado es colocar el bloque de perfil en la parte inferior de la barra lateral.

Usando Posicionamiento

Con ésta solución "tradicional", asumimos que la altura del perfil del usuario será de 70 px. Así que damos 70 px de padding a la parte inferior de la barra lateral en la cuál colocarlo. Pero ¿qué tal si en algún punto rediseñamos el cuadro del perfil y su altura cambia? ¿O decidimos colocarlo en la parte superior? En éstos casos, necesitaríamos crear clases adicionales para la barra lateral o modificar los estilos actuales, ninguna de ambas cosas son ideales.

La Manera Flexbox

Con Flexbox podemos resolver éste problema sensiblemente. Utilizaremos la misma técnica que usamos en el componente de las miniaturas, pero con una pequeña diferencia. Cambiaremos la dirección de horizontal a vertical con flex-direction: column;

Las partes superiores e inferiores del componente siguen "sin ser achicables". El elemento central .sidebar_nav llenará el resto del espacio gracias a su flex-grow: 1;

Así, aquí está el marcado HTML:

Y nuestros estilos básicos:

Para recapitular, el componente .sidebar tiene una propiedad flex-direction: column que transformará el flujo de sus elementos hijos de horizontal a vertical.

.siderbar_ _nav tiene la propiedad flex-grow: 1 que significa que ocupará todo el espacio disponible en el contenedor y empujará la caja sidebar_ _profile a la parte inferior de la barra lateral.

Con éste planteamiento, no necesitamos preocuparnos sobre la altura de la caja del perfil. Así que, ¿Qué nos da ésto?

Éste es el resultado final de la barra lateral con estilos adicionales, incluyendo algunos íconos sacados de Fontawesome.

Conclusión

Flexbox realmente ha cambiado la manera en que pensamos en el maquetado en la web, y felizmente es soportado por todos los navegadores modernos. En éste tutorial, usamos solo unas cuántas propiedades de Flexbox, pero hay muchas otras como puedes imaginar. En el próximo tutorial "Ejercicios en Flexbox", construiremos más componentes intermedios, cubriendo otras prestaciones de Flexbox a lo largo del camino.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.