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í:
É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:
1 |
<li class="list-item"> |
2 |
<div class="list-item__content"> |
3 |
<h4> Name Surname </h4> |
4 |
<p> Info </p> |
5 |
</div>
|
6 |
<div class="list-item__image"> |
7 |
<img src="images/image.png" alt="Image"> |
8 |
</div>
|
9 |
</li>
|
Y el CSS básico se verá así:
1 |
.list-item{ |
2 |
display: flex; |
3 |
}
|
4 |
.list-item__image{ |
5 |
flex-shrink: 0; |
6 |
}
|
7 |
.list .list-item__content{ |
8 |
flex-grow: 1; |
9 |
}
|
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:
- marcador de posición para el logo
- navegación
- 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
1 |
.sideabr{ |
2 |
position: relative; |
3 |
padding-bottom: 70px; |
4 |
}
|
5 |
.user-profile{ |
6 |
position: absolute; |
7 |
bottom: 0; |
8 |
}
|
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:
1 |
<!--Sidebar Component-->
|
2 |
<div class="sidebar"> |
3 |
<div class="sidebar__logo"> |
4 |
<h3> Sidebar </h3> |
5 |
</div>
|
6 |
<ul class="sidebar__nav"> |
7 |
<li> Home </li> |
8 |
<li> About Me</li> |
9 |
<li> Portfolio</li> |
10 |
<li> Contact Me</li> |
11 |
</ul>
|
12 |
<div class="sidebar__profile"> |
13 |
<img src="images/profile.jpg" alt="Profile Photo"> |
14 |
<h4>Name Surname</h4> |
15 |
</div>
|
16 |
</div>
|
Y nuestros estilos básicos:
1 |
.sidebar{ |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
height: 100%; |
5 |
}
|
6 |
.sidebar__logo h3{ ... } |
7 |
|
8 |
.sidebar__nav{ |
9 |
flex-grow: 1; |
10 |
list-style: none; |
11 |
padding: 0; |
12 |
}
|
13 |
|
14 |
.sidebar__profile{ ... } |
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.
By
