Plantilla CSS: display: flex;

📝 Uso previsto

Esta plantilla se utiliza cuando deseas colocar elementos o cajas una al lado de la otra. Es útil para diseños con tarjetas, botones en paralelo o estructuras responsivas.

📘 Explicación

Al aplicar display: flex; al elemento padre, sus hijos se alinean automáticamente en una fila. La propiedad gap permite controlar el espacio entre ellos. En este ejemplo, .flex-container es el contenedor y .flex-box cada uno de los elementos internos.

✅ Demostración

Caja 1

Caja 2

Caja 3

📄 Código (fragmento)

<style>
  .flex-container {
    display: flex;
    gap: 1rem;
  }
  .flex-box {
    flex: 1;
    padding: 1rem;
    background: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-box">Caja 1</div>
  <div class="flex-box">Caja 2</div>
  <div class="flex-box">Caja 3</div>
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Demostración de diseño flex</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
    }
    .flex-box {
      flex: 1;
      padding: 1rem;
      background: #f2f2f2;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-box">Caja 1</div>
    <div class="flex-box">Caja 2</div>
    <div class="flex-box">Caja 3</div>
  </div>
</body>
</html>

¡Copiado!

🧩 Técnicas prácticas para el uso de Flexbox en diseños web

display: flex es una de las propiedades CSS más poderosas en el diseño web moderno. Permite una disposición intuitiva de los elementos y es ideal para diseños responsivos.

🎯 Técnicas básicas de alineación

Con justify-content puedes controlar la alineación horizontal, y con align-items la alineación vertical. Por ejemplo, usando justify-content: space-between puedes distribuir los elementos uniformemente y alinearlos a los extremos. Además, al añadir flex-wrap: wrap, los elementos se ajustarán automáticamente cuando el ancho de la pantalla sea reducido.

✨ Ajustes avanzados de diseño

Con la propiedad flex en los elementos hijos, puedes ajustar las proporciones con precisión. Por ejemplo, combinando flex: 2 y flex: 1 lograrás una distribución en proporción 2:1. También puedes usar order para cambiar el orden visual sin alterar la estructura HTML.

📱 Puntos clave para el diseño responsivo

En vistas móviles, puedes cambiar a flex-direction: column para apilar los elementos verticalmente. Al combinarlo con media queries, se puede adaptar el diseño a distintos dispositivos. También es recomendable ajustar el valor de gap según el ancho de la pantalla.

Flexbox es muy potente, pero si el diseño es demasiado complejo, considera usar Grid. Además, si necesitas compatibilidad con navegadores antiguos, deberás incluir prefijos como display: -webkit-box.