Diferencia entre | Layouts Responsivos: Trabajando con layouts mobile | Alura Latam

¡Hola Silviajulianarociodiazdiaz!

La diferencia entre display: block; y display: flex; es cómo los elementos se comportan en relación a otros elementos en la página.

Cuando usamos display: block;, el elemento ocupa todo el ancho disponible y se coloca en una nueva línea. Esto significa que cualquier elemento que venga después de él se colocará debajo.

Por otro lado, cuando usamos display: flex;, el elemento se coloca en una línea junto con otros elementos flexibles. Puedes usar propiedades adicionales como justify-content y align-items para controlar cómo se distribuyen y alinean los elementos dentro del contenedor flex.

Aquí tienes un ejemplo práctico:

Supongamos que tienes una lista de elementos <div> y quieres que se muestren uno al lado del otro en lugar de en diferentes líneas. Puedes lograr esto utilizando display: flex; en el contenedor de la lista.

<style>
  .lista {
    display: flex;
  }

  .elemento {
    margin-right: 10px;
  }
</style>

<div class="lista">
  <div class="elemento">Elemento 1</div>
  <div class="elemento">Elemento 2</div>
  <div class="elemento">Elemento 3</div>
</div>

En este ejemplo, los elementos <div> con la clase "elemento" se mostrarán uno al lado del otro en una línea debido al display: flex; en el contenedor con la clase "lista".

Espero que esto aclare la diferencia entre display: block; y display: flex;. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Estoy aquí para ayudarte!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)