Comprender la propiedad flex-basis en CSS Flexbox

Introducción

En este laboratorio, los participantes explorarán la propiedad flex-basis en CSS Flexbox mediante un enfoque práctico y exhaustivo. Al crear un archivo HTML estructurado y agregando progresivamente estilos CSS, los aprendices adquirirán experiencia práctica en la comprensión de cómo flex-basis influye en el tamaño inicial de los elementos flexibles dentro de un contenedor.

El laboratorio guía a los estudiantes a través de la creación de un diseño de flexbox, la definición de propiedades del contenedor, la aplicación de flex-basis a elementos individuales y la experimentación con diferentes valores. Los participantes aprenderán cómo flex-basis interactúa con otras propiedades flex, lo que les permitirá controlar el dimensionamiento y la distribución fundamental de los elementos en diseños web responsivos.

Crea un archivo HTML para el diseño de Flexbox

En este paso, crearás el archivo HTML fundamental para explorar la propiedad flex-basis en CSS Flexbox. Estableceremos una estructura HTML simple que servirá de base para nuestras experimentaciones con diseños de flexbox.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado flexbox-demo.html utilizando la interfaz del WebIDE.

Aquí está la estructura HTML básica que utilizarás:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox flex-basis Demo</title>
    <style>
      /* CSS styles will be added in subsequent steps */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flex-item item1">Item 1</div>
      <div class="flex-item item2">Item 2</div>
      <div class="flex-item item3">Item 3</div>
      <div class="flex-item item4">Item 4</div>
      <div class="flex-item item5">Item 5</div>
    </div>
  </body>
</html>

Analicemos la estructura HTML:

Hemos creado un contenedor <div> con la clase container
Dentro del contenedor, tenemos cinco elementos <div> con las clases flex-item y clases individuales de elemento
Esta estructura nos permitirá demostrar las propiedades flex-basis en los pasos siguientes

Salida de ejemplo cuando guardas el archivo en el WebIDE:

File created: ~/project/flexbox-demo.html

Define Basic CSS Flexbox Container

En este paso, aprenderás a crear un contenedor básico de CSS Flexbox agregando estilos al archivo HTML creado en el paso anterior. Abre el archivo flexbox-demo.html en el WebIDE y modifica la sección <style> para definir el contenedor de flexbox.

Agrega el siguiente CSS para definir el contenedor básico de flexbox:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }
</style>

Analicemos las propiedades clave de CSS:

display: flex; transforma el contenedor en un contenedor de flexbox
background-color y border ayudan a visualizar el contenedor
Los estilos .flex-item definen la apariencia de los elementos flexibles individuales
margin y padding proporcionan espacio entre los elementos

Salida de ejemplo cuando guardas el archivo:

Flexbox container styles added to flexbox-demo.html

Cuando abres este archivo HTML en un navegador, verás cinco cajas verdes dispuestas horizontalmente, lo que demuestra el diseño de flex predeterminado.

Aplicar la propiedad flex-basis a los elementos flexibles

En este paso, aprenderás sobre la propiedad flex-basis y cómo controla el tamaño inicial de los elementos flexibles. Abre el archivo flexbox-demo.html en el WebIDE y actualiza los estilos CSS para demostrar flex-basis.

Agrega el siguiente CSS para aplicar flex-basis a los elementos flexibles individuales:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

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

  .item1 {
    flex-basis: 100px;
  }
  .item2 {
    flex-basis: 200px;
  }
  .item3 {
    flex-basis: 150px;
  }
  .item4 {
    flex-basis: 250px;
  }
  .item5 {
    flex-basis: 120px;
  }
</style>

Puntos claves sobre flex-basis:

Establece el tamaño principal inicial de un elemento flexible
Puede especificarse en píxeles, porcentajes u otras unidades
Determina el tamaño predeterminado antes del crecimiento o encogimiento flexible
Reemplaza width en un contenedor de flexbox

Salida de ejemplo cuando guardas el archivo:

Flex items with different flex-basis values added

Cuando abres el archivo HTML en un navegador, verás elementos flexibles con anchos iniciales variables según sus valores de flex-basis.

Experimenta con diferentes valores de flex-basis

En este paso, explorarás varias maneras de especificar valores de flex-basis y entenderás cómo diferentes unidades y enfoques afectan el dimensionamiento de los elementos flexibles. Actualiza el CSS en tu archivo flexbox-demo.html con los siguientes estilos:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

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

  /* Tipos diferentes de valores de flex-basis */
  .item1 {
    flex-basis: 100px;
  } /* Ancho fijo en píxeles */
  .item2 {
    flex-basis: 20%;
  } /* Porcentaje del contenedor */
  .item3 {
    flex-basis: auto;
  } /* Basado en el contenido */
  .item4 {
    flex-basis: 10rem;
  } /* Usando unidades rem */
  .item5 {
    flex-basis: content;
  } /* Basado en el tamaño del contenido */
</style>

Observaciones clave sobre los valores de flex-basis:

Los valores en píxeles (100px) proporcionan un ancho fijo
Los valores en porcentaje (20%) se escalan en relación con el contenedor
auto utiliza el tamaño del contenido del elemento
Diferentes unidades como rem ofrecen dimensionamiento responsivo
La palabra clave content se adapta al contenido del elemento

Salida de ejemplo cuando guardas el archivo:

Flex items with diverse flex-basis configurations

Cuando abres el archivo HTML en un navegador, verás cómo diferentes valores de flex-basis afectan el dimensionamiento y el diseño de los elementos.

Explora la interacción de flex-basis con otras propiedades de Flex

En este paso, aprenderás cómo flex-basis interactúa con otras propiedades de flexbox como flex-grow y flex-shrink. Actualiza el CSS en tu archivo flexbox-demo.html con el siguiente ejemplo completo:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
    width: 100%;
  }

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

  /* Demostrando las interacciones de propiedades de flexbox */
  .item1 {
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 0;
  }
  .item2 {
    flex-basis: 200px;
    flex-grow: 2;
    flex-shrink: 1;
  }
  .item3 {
    flex-basis: 150px;
    flex-grow: 1;
    flex-shrink: 2;
  }
  .item4 {
    flex: 1 1 250px; /* atajo para grow, shrink, basis */
  }
  .item5 {
    flex: 2 0 120px;
  }
</style>

Conceptos clave de las interacciones de propiedades de flexbox:

flex-grow: Determina cuánto crecerá un elemento en relación con otros elementos
flex-shrink: Controla cuánto se encogerá un elemento en relación con otros elementos
El atajo flex combina grow, shrink y basis
Diferentes combinaciones crean comportamientos de diseño únicos

Salida de ejemplo cuando guardas el archivo:

Flex items with complex grow, shrink, and basis interactions

Cuando abres el archivo HTML en un navegador, observarás cómo estas propiedades trabajan juntas para crear diseños flexibles.

Resumen

En este laboratorio, los participantes exploran la propiedad flex-basis en CSS Flexbox al crear una demostración integral de HTML y CSS. El laboratorio comienza con la construcción de un archivo HTML fundamental que presenta un contenedor con múltiples elementos flexibles, estableciendo el marco estructural para las experimentaciones con el diseño de flexbox. Los participantes aprenden a definir un contenedor básico de flexbox usando CSS, configurando propiedades de visualización, colores de fondo y estilos iniciales para crear un diseño responsivo y visualmente atractivo.

El laboratorio guía a los aprendices a la hora de aplicar la propiedad flex-basis a los elementos flexibles, lo que les permite entender cómo esta propiedad controla el tamaño inicial de los elementos flexibles antes de que se distribuya espacio adicional. Al experimentar con diferentes valores de flex-basis y explorar su interacción con otras propiedades de flexbox, los participantes obtienen conocimientos prácticos sobre la gestión de diseños flexibles y el control del dimensionamiento de los elementos dentro de un contenedor de flexbox.