En esta clase breve pero esencial, vamos a aprender cómo alinear una imagen y un texto utilizando Flexbox. Este es un diseño muy común en la web donde se tiene un objeto multimedia (imagen, video, etc.) a un lado y el texto al otro lado. Vamos a ver cómo lograrlo de manera efectiva y sencilla.
Estructura HTML del Contenedor de Media
Primero, definimos la estructura HTML de nuestro contenedor multimedia. Tendrá una clase media, una imagen y un párrafo para el texto.
<div class="media">
<img src="img/kikopalomares.jpg" alt="" width="160px">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aliquam assumenda reiciendis quasi numquam, quidem nihil repellendus quam perspiciatis. Vero dicta repellat recusandae sit cum voluptatibus fugit doloribus neque et.</p>
</div>Estilos CSS para el Contenedor de Media
A continuación, aplicamos estilos para que la imagen y el texto se alineen correctamente uno al lado del otro.
.media{
display: flex;
margin: 10px;
flex-direction: row-reverse;
}
.media p{
margin: 5px;
}Explicación del Código CSS
Contenedor de Media:
.mediausadisplay: flexpara disponer los elementos en una fila.margin: 10pxse añade para separar el contenedor del resto del contenido.flex-direction: row-reverseinvierte el orden de los elementos, colocando la imagen a la derecha y el texto a la izquierda.
Párrafo de Texto:
.media pse le añademargin: 5pxpara separar el texto de la imagen y evitar que queden pegados.
Conclusión
Con estos sencillos pasos, hemos aprendido a alinear una imagen y un texto usando Flexbox. Esta técnica es muy útil y se usa con frecuencia en el diseño web para crear estructuras limpias y organizadas. La flexibilidad de Flexbox nos permite ajustar fácilmente la disposición de los elementos según nuestras necesidades.
