Flexbox es una nueva y poderosa forma de crear diseños que hace que algunos de los aspectos más desafiantes del desarrollo web sean triviales. Casi todos los navegadores que se utilizan hoy en día lo admiten, por lo que es un buen momento para ver cómo puede encajar en su trabajo de front-end típico del día a día.
Es por eso que en este tutorial rápido vamos a crear una sección de comentarios usando flexbox. Echaremos un vistazo a algunas de las propiedades más interesantes que ofrece el modo de diseño flexbox y le mostraremos cómo aprovecharlo al máximo.
Qué vamos a usar
Flexbox consta de varias propiedades CSS, algunas de las cuales usaremos hoy:
display: flex- Esto activa el modo de diseño flexible y hace que los hijos del elemento sigan las reglas de Flexbox.justify-content- Esta propiedad define dónde se alinearán los elementos secundarios de un elemento flexbox (esto es similar a la alineación de texto, lea más aquí).order- Flexbox nos da control sobre la posición exacta en la que se muestran los elementos. Usamos esta poderosa herramienta en nuestra sección de comentarios para cambiar el texto y la foto (obtenga más información aquí).flex-wrap- Controla la envoltura de los elementos dentro del elemento flexible. Usamos esto para obligar a los avatares a mostrarse debajo del texto del comentario en pantallas pequeñas (flex-wrap en MDN).
El diseño
Queremos que nuestra sección de comentarios cumpla con los siguientes requisitos:
- Cada comentario debe tener un avatar, nombre, hora y cuerpo del comentario.
- Debe haber dos tipos de comentarios:los escritos por el autor (coloreados en azul y con el avatar a la derecha) y los escritos por todos los demás.
- El marcado HTML para ambos tipos de comentarios debe ser lo más similar posible, por lo que es fácil generar comentarios a través del código.
- Todo tiene que ser totalmente receptivo.
Todo esto se puede hacer con unas pocas líneas de CSS con flexbox. ¡Pasemos al código!
El HTML
Nuestro HTML es bastante sencillo. Tendremos una lista de comentarios con un formulario básico para escribir nuevos comentarios al final.
<ul class="comment-section">
<li class="comment user-comment">
<div class="info">
<a href="#">Anie Silverston</a>
<span>4 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />
</a>
<p>Suspendisse gravida sem?</p>
</li>
<li class="comment author-comment">
<div class="info">
<a href="#">Jack Smith</a>
<span>3 hours ago</span>
</div>
<a class="avatar" href="#">
<img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p>
</li>
<!-- More comments -->
<li class="write-new">
<form action="#" method="post">
<textarea placeholder="Write your comment here" name="comment"></textarea>
<div>
<img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
<button type="submit">Submit</button>
</div>
</form>
</li>
</ul>
Si observa detenidamente el código anterior, notará que, además de tener diferentes clases, el HTML para los comentarios de los usuarios y los comentarios del autor son prácticamente iguales. Todas las diferencias estilísticas y de diseño entre los dos serán manejadas únicamente por CSS aplicado al .user-comment y .author-comment clases.
El CSS
Aquí vamos a ver las técnicas relacionadas con flexbox que hemos usado al construir el diseño. Si desea examinar la hoja de estilo con todo detalle, descargue el archivo CSS completo desde el botón que se encuentra cerca de la parte superior del artículo.
En primer lugar, vamos a dar todos los comentarios display: flex , que nos permitirá usar las propiedades de flexbox en los comentarios y sus elementos secundarios.
.comment{
display: flex;
} Estos contenedores flexibles abarcan todo el ancho de nuestra sección de comentarios y contienen la información del usuario, el avatar y el mensaje. Como queremos que los comentarios escritos por el autor estén alineados a la derecha, podemos usar la siguiente propiedad flexible y alinear todo hacia el final de nuestro contenedor.
.comment.author-comment{
justify-content: flex-end;
} Esto dejará los comentarios con este aspecto:
Ahora tenemos el comentario del autor alineado a la derecha, pero también queremos tener los elementos dentro del contenedor en orden inverso, para que el mensaje llegue primero, luego el avatar y la información en el extremo derecho. Para ello aprovecharemos el order propiedad.
.comment.author-comment .info{
order: 3;
}
.comment.author-comment .avatar{
order: 2;
}
.comment.author-comment p{
order: 1;
}
Como puede ver, con la ayuda de flexbox, todo no podría ser más fácil.
Nuestra sección de comentarios se ve tal como queríamos. Lo único que queda por hacer es asegurarse de que también se vea bien en dispositivos más pequeños. Dado que no habrá tanto espacio disponible en una pantalla más estrecha, tendremos que hacer algunos cambios en el diseño y hacer que nuestro contenido sea más legible.
Configuramos una consulta de medios que hace que los párrafos de comentarios se expandan, ocupando todo el ancho del contenedor. Esto hará que el avatar y la información del usuario pasen a la siguiente línea, ya que los comentarios tienen su flex-wrap propiedad establecida en wrap .
@media (max-width: 800px){
/* Reverse the order of elements in the user comments,
so that the avatar and info appear after the text. */
.comment.user-comment .info{
order: 3;
}
.comment.user-comment .avatar{
order: 2;
}
.comment.user-comment p{
order: 1;
}
/* Make the paragraph in the comments take up the whole width,
forcing the avatar and user info to wrap to the next line*/
.comment p{
width: 100%;
}
/* Align toward the beginning of the container (to the left)
all the elements inside the author comments. */
.comment.author-comment{
justify-content: flex-start;
}
} La diferencia se puede detectar de inmediato comparando esta captura de pantalla con la anterior. También puede intentar abrir la demostración y cambiar el tamaño de su navegador para ver cómo la sección de comentarios se adapta al tamaño de la ventana.
Conclusión
Esto resume nuestro tutorial. Esperamos que esto le haya dado un ejemplo práctico sobre cómo usar flexbox al crear diseños reales. Si tiene curiosidad sobre qué más es posible, aquí hay algunos recursos excelentes que le gustarán:
- Guía de CSS-Tricks para flexbox - aquí.
- Un artículo detallado de MDN - aquí.
- Un sitio web con soluciones flexbox sencillas para problemas clásicos de CSS:aquí.