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

Propiedades del Contenedor Flex

Siguiente ►
►

En este tema, exploraremos las propiedades del contenedor flex, una parte fundamental de la técnica de diseño de Flexbox. Estas propiedades permiten controlar la disposición y el comportamiento de los elementos hijos dentro de un contenedor flex. A lo largo de esta sección, aprenderás cómo utilizar estas propiedades para crear diseños flexibles y adaptativos.

  1. display: flex

La propiedad display: flex convierte un elemento en un contenedor flex. Todos los elementos hijos de este contenedor se convierten automáticamente en elementos flexibles.

.container {
  display: flex;
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

  1. flex-direction

La propiedad flex-direction define la dirección en la que los elementos flexibles se colocan dentro del contenedor. Los valores posibles son:

  • row (predeterminado): Los elementos se colocan en una fila horizontal.
  • row-reverse: Los elementos se colocan en una fila horizontal, pero en orden inverso.
  • column: Los elementos se colocan en una columna vertical.
  • column-reverse: Los elementos se colocan en una columna vertical, pero en orden inverso.
.container {
  display: flex;
  flex-direction: row; /* o row-reverse, column, column-reverse */
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: column;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

  1. flex-wrap

La propiedad flex-wrap controla si los elementos flexibles deben ajustarse en una sola línea o pueden romperse en varias líneas. Los valores posibles son:

  • nowrap (predeterminado): Todos los elementos se colocan en una sola línea.
  • wrap: Los elementos se ajustan en varias líneas, si es necesario.
  • wrap-reverse: Los elementos se ajustan en varias líneas, pero en orden inverso.
.container {
  display: flex;
  flex-wrap: wrap; /* o nowrap, wrap-reverse */
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
      width: 200px;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

  1. justify-content

La propiedad justify-content alinea los elementos flexibles a lo largo del eje principal (horizontal por defecto). Los valores posibles son:

  • flex-start (predeterminado): Los elementos se alinean al inicio del contenedor.
  • flex-end: Los elementos se alinean al final del contenedor.
  • center: Los elementos se centran en el contenedor.
  • space-between: Los elementos se distribuyen uniformemente con espacio entre ellos.
  • space-around: Los elementos se distribuyen uniformemente con espacio alrededor de ellos.
  • space-evenly: Los elementos se distribuyen uniformemente con espacio igual entre ellos.
.container {
  display: flex;
  justify-content: center; /* o flex-start, flex-end, space-between, space-around, space-evenly */
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

  1. align-items

La propiedad align-items alinea los elementos flexibles a lo largo del eje transversal (vertical por defecto). Los valores posibles son:

  • stretch (predeterminado): Los elementos se estiran para llenar el contenedor.
  • flex-start: Los elementos se alinean al inicio del contenedor.
  • flex-end: Los elementos se alinean al final del contenedor.
  • center: Los elementos se centran en el contenedor.
  • baseline: Los elementos se alinean según su línea base.
.container {
  display: flex;
  align-items: center; /* o stretch, flex-start, flex-end, baseline */
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      align-items: center;
      height: 200px;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

  1. align-content

La propiedad align-content alinea las líneas del contenedor flex cuando hay espacio extra en el eje transversal. Esta propiedad solo tiene efecto cuando hay múltiples líneas de elementos flexibles. Los valores posibles son:

  • stretch (predeterminado): Las líneas se estiran para llenar el contenedor.
  • flex-start: Las líneas se alinean al inicio del contenedor.
  • flex-end: Las líneas se alinean al final del contenedor.
  • center: Las líneas se centran en el contenedor.
  • space-between: Las líneas se distribuyen uniformemente con espacio entre ellas.
  • space-around: Las líneas se distribuyen uniformemente con espacio alrededor de ellas.
  • space-evenly: Las líneas se distribuyen uniformemente con espacio igual entre ellas.
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* o stretch, flex-start, flex-end, center, space-around, space-evenly */
}

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      height: 400px;
      background-color: lightgray;
    }
    .item {
      background-color: cornflowerblue;
      padding: 20px;
      margin: 10px;
      color: white;
      width: 200px;
    }
  </style>
  <title>Propiedades del Contenedor Flex</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

Resumen

En esta sección, hemos cubierto las propiedades fundamentales del contenedor flex en CSS:

  1. display: flex: Convierte un elemento en un contenedor flex.
  2. flex-direction: Define la dirección de los elementos flexibles.
  3. flex-wrap: Controla si los elementos flexibles se ajustan en una o varias líneas.
  4. justify-content: Alinea los elementos flexibles a lo largo del eje principal.
  5. align-items: Alinea los elementos flexibles a lo largo del eje transversal.
  6. align-content: Alinea las líneas del contenedor flex cuando hay espacio extra en el eje transversal.

Estas propiedades te permiten crear diseños flexibles y adaptativos de manera eficiente. En el próximo tema, exploraremos las propiedades de los ítems flex, que te permitirán controlar el comportamiento individual de los elementos dentro del contenedor flex.

◄ 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