• Cuarzo.dev
  • Posts
  • Cómo usar las MEDIA QUERIES en FLEXBOX CSS para crear layouts RESPONSIVE

Cómo usar las MEDIA QUERIES en FLEXBOX CSS para crear layouts RESPONSIVE

Aprende a usar media queries de CSS junto con Flexbox para crear diseños web responsivos. Tutorial paso a paso para programadores con ejemplos prácticos.

Cómo combinar Media Queries de CSS con Flexbox para diseños responsivos

En el mundo del diseño web, la responsividad es clave. Los usuarios acceden a sitios web desde una variedad de dispositivos con diferentes tamaños de pantalla. Para asegurar que tu diseño se vea bien en todos ellos, es esencial utilizar herramientas como Flexbox y media queries de CSS. Vamos a empezar creando un archivo HTML y añadiendo estilos CSS que se adapten a diferentes anchos de pantalla.

Paso 1: Configuración del entorno

Primero, abre tu editor de código, en este caso, Visual Studio Code. Crea un nuevo archivo llamado index.html e inicialízalo con HTML5. Cambia el título del documento a algo descriptivo, como "Flexbox".

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

En este código, hemos creado un contenedor div con la clase flex-container, que incluye tres elementos internos numerados.

Paso 2: Aplicación de estilos CSS básicos

Ahora, crea un archivo llamado styles.css y añade estilos básicos para el contenedor y sus elementos hijos.

.flex-container {
    display: flex;
    background-color: #f0f0f0;
    padding: 10px;
}

.flex-container > div {
    background-color: #4CAF50;
    color: white;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

En este paso, hemos configurado el contenedor para que use display: flex y hemos estilizado los elementos internos con colores de fondo, márgenes, rellenos y alineación de texto.

Paso 3: Añadiendo Media Queries

Para hacer el diseño responsivo, vamos a añadir media queries. Estos nos permitirán cambiar la disposición de los elementos en función del ancho de la pantalla.

@media (max-width: 600px) {
    .flex-container {
        flex-direction: column;
    }

    .flex-container > div {
        width: 100%;
    }
}

Con este código, cuando la pantalla tenga un ancho máximo de 600 píxeles, los elementos dentro del contenedor se organizarán en una columna y ocuparán el 100% del ancho disponible.

Paso 4: Probando el diseño en el navegador

Ahora abre tu archivo index.html en un navegador usando la extensión Live Server de Visual Studio Code para ver los cambios en tiempo real. Redimensiona la ventana del navegador para observar cómo los elementos cambian de una fila a una columna según el tamaño de la pantalla.

Conclusión

¡Y ahí lo tienes! Has aprendido a combinar media queries de CSS con Flexbox para crear diseños web responsivos. Con estas herramientas, puedes asegurarte de que tu sitio web se vea bien en cualquier dispositivo, mejorando la experiencia del usuario y la funcionalidad del diseño.

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Join the conversation

or to participate.