Understand flex-basis Property in CSS Flexbox

Introduction

In this lab, participants will explore the flex-basis property in CSS Flexbox through a comprehensive, hands-on approach. By creating a structured HTML file and progressively adding CSS styles, learners will gain practical experience in understanding how flex-basis influences the initial sizing of flex items within a container.

The lab guides students through creating a flexbox layout, defining container properties, applying flex-basis to individual items, and experimenting with different values. Participants will learn how flex-basis interacts with other flex properties, enabling them to control the fundamental sizing and distribution of elements in responsive web designs.

Create HTML File for Flexbox Layout

In this step, you'll create the foundational HTML file for exploring the flex-basis property in CSS Flexbox. We'll set up a simple HTML structure that will serve as the basis for our flexbox layout experiments.

Open the WebIDE and navigate to the ~/project directory. Create a new file called flexbox-demo.html using the WebIDE interface.

Here's the basic HTML structure you'll use:

<!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>

Let's break down the HTML structure:

We've created a container <div> with the class container
Inside the container, we have five <div> elements with classes flex-item and individual item classes
This structure will allow us to demonstrate flex-basis properties in the following steps

Example output when you save the file in the WebIDE:

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

Define Basic CSS Flexbox Container

In this step, you'll learn how to create a basic CSS Flexbox container by adding styles to the HTML file created in the previous step. Open the flexbox-demo.html file in the WebIDE and modify the <style> section to define the flexbox container.

Add the following CSS to define the basic flexbox container:

<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>

Let's break down the key CSS properties:

display: flex; transforms the container into a flex container
background-color and border help visualize the container
.flex-item styles define the appearance of individual flex items
margin and padding provide spacing between items

Example output when you save the file:

Flexbox container styles added to flexbox-demo.html

When you open this HTML file in a browser, you'll see five green boxes arranged horizontally, demonstrating the default flex layout.

Apply flex-basis Property to Flex Items

In this step, you'll learn about the flex-basis property and how it controls the initial size of flex items. Open the flexbox-demo.html file in the WebIDE and update the CSS styles to demonstrate flex-basis.

Add the following CSS to apply flex-basis to individual flex items:

<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>

Key points about flex-basis:

It sets the initial main size of a flex item
Can be specified in pixels, percentages, or other units
Determines the default size before flex growth or shrinking
Replaces width in a flex container

Example output when you save the file:

Flex items with different flex-basis values added

When you open the HTML file in a browser, you'll see flex items with varying initial widths based on their flex-basis values.

Experiment with Different flex-basis Values

In this step, you'll explore various ways to specify flex-basis values and understand how different units and approaches affect flex item sizing. Update the CSS in your flexbox-demo.html file with the following styles:

<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;
  }

  /* Different flex-basis value types */
  .item1 {
    flex-basis: 100px;
  } /* Fixed pixel width */
  .item2 {
    flex-basis: 20%;
  } /* Percentage of container */
  .item3 {
    flex-basis: auto;
  } /* Based on content */
  .item4 {
    flex-basis: 10rem;
  } /* Using rem units */
  .item5 {
    flex-basis: content;
  } /* Based on content size */
</style>

Key observations about flex-basis values:

Pixel values (100px) provide a fixed width
Percentage values (20%) scale relative to the container
auto uses the item's content size
Different units like rem offer responsive sizing
content keyword adapts to the item's content

Example output when you save the file:

Flex items with diverse flex-basis configurations

When you open the HTML file in a browser, you'll see how different flex-basis values impact item sizing and layout.

Explore flex-basis Interaction with Other Flex Properties

In this step, you'll learn how flex-basis interacts with other flex properties like flex-grow and flex-shrink. Update the CSS in your flexbox-demo.html file with the following comprehensive example:

<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;
  }

  /* Demonstrating flex property interactions */
  .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; /* shorthand for grow, shrink, basis */
  }
  .item5 {
    flex: 2 0 120px;
  }
</style>

Key concepts of flex property interactions:

flex-grow: Determines how much an item will grow relative to other items
flex-shrink: Controls how much an item will shrink relative to other items
The flex shorthand combines grow, shrink, and basis
Different combinations create unique layout behaviors

Example output when you save the file:

Flex items with complex grow, shrink, and basis interactions

When you open the HTML file in a browser, you'll observe how these properties work together to create flexible layouts.

Summary

In this lab, participants explore the flex-basis property in CSS Flexbox by creating a comprehensive HTML and CSS demonstration. The lab begins with constructing a foundational HTML file featuring a container with multiple flex items, establishing the structural framework for flexbox layout experiments. Participants learn to define a basic flexbox container using CSS, setting display properties, background colors, and initial styling to create a responsive and visually engaging layout.

The lab guides learners through applying the flex-basis property to flex items, enabling them to understand how this property controls the initial size of flex elements before additional space is distributed. By experimenting with different flex-basis values and exploring its interaction with other flex properties, participants gain practical insights into managing flexible layouts and controlling element sizing within a flexbox container.