El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Introducción a Flexbox

Siguiente ►
►

Flexbox, o el Módulo de Caja Flexible, es una herramienta poderosa en CSS que permite crear diseños complejos y responsivos de manera más sencilla y eficiente. A diferencia de los métodos tradicionales de diseño, como el uso de flotaciones y posicionamiento, Flexbox está diseñado para distribuir el espacio dentro de un contenedor y alinear los elementos de manera predecible.

Conceptos Clave de Flexbox

  1. Contenedor Flex y Elementos Flex

  • Contenedor Flex: Es el elemento padre que contiene los elementos flexibles. Se define estableciendo la propiedad display a flex o inline-flex.
  • Elementos Flex: Son los elementos hijos directos del contenedor flex. Estos elementos se distribuyen y alinean dentro del contenedor flex.

  1. Ejes de Flexbox

  • Eje Principal (Main Axis): Es el eje principal a lo largo del cual se distribuyen los elementos flex. Por defecto, es horizontal (de izquierda a derecha).
  • Eje Cruzado (Cross Axis): Es el eje perpendicular al eje principal. Por defecto, es vertical (de arriba a abajo).

  1. Propiedades del Contenedor Flex

  • display: flex; o display: inline-flex;
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

  1. Propiedades de los Elementos Flex

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Ejemplo Práctico

Vamos a ver un ejemplo básico de cómo usar Flexbox para alinear elementos dentro de un contenedor.

HTML

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

CSS

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

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

Explicación del Código

  1. Contenedor Flex:

    • display: flex;: Define el contenedor como un contenedor flex.
    • justify-content: center;: Centra los elementos flex horizontalmente.
    • align-items: center;: Centra los elementos flex verticalmente.
    • height: 100vh;: Hace que el contenedor ocupe toda la altura de la ventana.
    • background-color: #f0f0f0;: Establece un color de fondo para el contenedor.

  2. Elementos Flex:

    • background-color: #4CAF50;: Establece un color de fondo para los elementos flex.
    • color: white;: Establece el color del texto.
    • padding: 20px;: Añade espacio alrededor del contenido dentro de los elementos flex.
    • margin: 10px;: Añade espacio alrededor de los elementos flex.
    • font-size: 30px;: Establece el tamaño de la fuente.
    • text-align: center;: Centra el texto dentro de los elementos flex.

Ejercicio Práctico

Ejercicio 1: Crear un Contenedor Flex con Alineación Diferente

Objetivo: Crear un contenedor flex que alinee los elementos flex al final del contenedor y distribuya el espacio entre ellos.

HTML

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

CSS

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100vh;
    background-color: #e0e0e0;
}

.flex-item {
    background-color: #2196F3;
    color: white;
    padding: 20px;
    margin: 10px;
    font-size: 30px;
    text-align: center;
}

Solución y Explicación

  1. Contenedor Flex:

    • justify-content: space-between;: Distribuye el espacio entre los elementos flex.
    • align-items: flex-end;: Alinea los elementos flex al final del contenedor.

  2. Elementos Flex:

    • Los estilos son similares al ejemplo anterior, pero con un color de fondo diferente (#2196F3).

Resumen

En esta lección, hemos aprendido los conceptos básicos de Flexbox, incluyendo los contenedores flex y los elementos flex, así como las propiedades clave que se utilizan para controlar la alineación y distribución de los elementos. También hemos visto un ejemplo práctico y un ejercicio para reforzar estos conceptos. En la próxima lección, profundizaremos en las propiedades del contenedor flex y cómo utilizarlas para crear diseños más complejos y responsivos.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados