Flexbox es una nueva y poderosa manera de llevar a cabo diseños, que hace que algunos de los aspectos más desafiantes del desarrollo web sean triviales. Casi todos los navegadores que se usan hoy en día lo soportan, por lo que es un buen momento para ver cómo puede encajar en tu típico día a día como desarrollador frontend.
Esta es la razón por la cual en este sencillo tutorial vamos a crear una sección de comentarios usando flexbox. Vamos a echar un vistazo a algunas de las propiedades más interesantes que el modo de diseño flexbox puede ofrecerte y a mostrarte cómo puedes aprovecharte al máximo de ellas.
¿Qué vamos a utilizar?
Flexbox se compone de una serie de propiedades CSS, estas son las que vamos a utilizar hoy:
- display:flex: Activa el modo de diseño flex y hacer que los elementos hijos sigan las reglas de flexbox
- justify-content: Esta propiedad define donde se tiene que alinear el hijo de un elemento flexbox (es similar a text-align)
- order: Flexbox te proporciona un control sobre la posición exacta donde se muestran los elementos. Utilizaremos esta potente herramienta en nuestra sección de comentarios para cambiar el texto y la foto.
- flex-wrap: Controla donde están incluidos los elementos flex. Utilizamos esto para obligar que los avatares se muestren debajo del propio comentarios en pantallas pequeñas.
El diseño
Queremos que nuestra sección de comentarios cumpla los siguiente requisitos:
- Cada comentarios debe tener un avatar, un nombre, una fecha y el cuerpo del comentario
- Debe haber dos tipos de comentarios, los escritos por el autor (de color azul y con el avatar situado a la derecha) y los escritos por los demás usuarios.
- El diseño para ambos tipos de comentarios debe ser lo más similar posible, para que sea fácil generar comentarios a través de código
- Todo debe ser responsive
Todo esto se puede hacer con unas cuantas líneas de CSS con flexbox. Así que, ¡vamos allá!
El HTML
Nuestro HTML es bastante sencillo. Tendremos un listado 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 observas atentamente el código anterior, verás que, aparte de tener clases diferentes, el HTML para los comentarios del usuario y los comentarios del autor son prácticamente los mismos. Todas las diferencias de estilo y de diseño entre los dos tipos, serán gestionadas únicamente por CSS mediante las clases .user-comment y .author-comment.
El CSS
Aquí vamos a ver las técnicas de flexbox que utilizaremos para construir el diseño. En primer lugar, vamos a darle a todos los comentarios el estilo display:flex, que nos permitirá utilizar las propiedades de flexbox en todos ellos y en sus elementos secundarios.
.comment{
display: flex;
}
Estos contenedores flex abarcan todo el ancho de nuestra sección de comentarios y mantendrán la información del usuario, avatar y el mensaje. Puesto que queremos que los comentarios escritos por el autor se alineen a la derecha, podemos usar la siguiente propiedad de flex y alinear todo hacia el final de nuestro contenedor.
.comment.author-comment{
justify-content: flex-end;
}
Ahora que tenemos el comentario del autor alineado a la derecha, queremos tener los demás elementos dentro del contenedor en orden inverso, de modo que el mensaje sea lo que se vea primero, luego el avatar y después la información en la derecha. Para ello aprovecharemos las ventajas de la propiedad order.
.comment.author-comment .info{
order: 3;
}
.comment.author-comment .avatar{
order: 2;
}
.comment.author-comment p{
order: 1;
}
Nuestra sección de comentarios ya se va pareciendo a lo que queríamos. Lo único que queda por hacer es asegurarnos de que se va a ver bien en dispositivos más pequeños. Dado que no habrá mucho espacio en las pantallas más estrechas, tendremos que realizar algunos reajustes en el diseño y hacer que nuestro contenido sea totalmente legible.
Establecemos una media-query que hace que los párrafos de los comentarios se expandan, ocupando así todo el ancho del contenedor. Esto hará que la información del avatar y del usuario se muevan a la siguiente línea, ya que los comentarios tienen su propiedad de flex-wrap 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;
}
}
Y esto sería todo. Espero que con este maravilloso tutorial sepas crear una sección de comentarios totalmente responsive utilizando las propiedades de Flexbox.
Fuente: tutorialzine.com