Explore Flex Direction in CSS Flexbox

Introduction

In this lab, you will explore the various flex directions available in CSS Flexbox, gaining hands-on experience with how elements can be arranged and positioned within a flex container. Through a step-by-step approach, you'll create an HTML structure and progressively implement different flex direction properties, including row, row-reverse, column, and column-reverse orientations.

The lab begins by setting up a foundational HTML file with a flex container and multiple flex items, providing a visual demonstration of how flex direction impacts layout. By modifying the CSS flex-direction property, you'll learn how to control the flow and positioning of elements, understanding the fundamental principles of CSS Flexbox and its powerful layout capabilities.

Set Up HTML Structure for Flexbox Demonstration

In this step, you'll create the foundational HTML structure for demonstrating CSS Flexbox directions. We'll set up a simple HTML file with multiple div elements that will help us explore different flex directions.

First, open the WebIDE and navigate to the ~/project directory. Create a new file called flexbox-demo.html by right-clicking in the file explorer and selecting "New File".

Copy the following HTML code into the flexbox-demo.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Direction Demo</title>
    <style>
      .flex-container {
        display: flex;
        border: 2px solid #333;
        margin-bottom: 20px;
        padding: 10px;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </div>
  </body>
</html>

Let's break down the key components of this HTML structure:

We've created a <div> with the class flex-container that will serve as our flex container.
Inside the container, we have four <div> elements with the class flex-item.
In the <style> section, we've added basic CSS to:
- Set display: flex on the container
- Give flex items a fixed size and background color
- Add some basic styling for visibility

This initial setup provides a clean, simple structure that we'll use to demonstrate different flex directions in the upcoming steps.

Implement Row Flex Direction

In this step, you'll learn about the default flex direction in CSS Flexbox: row direction. The row direction is the default layout where flex items are positioned horizontally from left to right.

Open the flexbox-demo.html file in the WebIDE and modify the <style> section to explicitly set the flex direction to row:

<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* Explicitly set row direction (default) */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Key points about row flex direction:

Items are laid out horizontally from left to right
flex-direction: row is the default value for flex containers
Each item maintains its original order
The main axis runs horizontally
The cross axis runs vertically

Example output in a web browser will show four green squares arranged in a horizontal line from left to right.

To help you understand the visual difference, note how the items are naturally positioned side by side without any additional configuration. This demonstrates the default row flex direction's behavior.

Implement Row-Reverse Flex Direction

In this step, you'll explore the row-reverse flex direction, which changes the order of flex items while maintaining a horizontal layout.

Open the flexbox-demo.html file in the WebIDE and modify the <style> section to set the flex direction to row-reverse:

<style>
  .flex-container {
    display: flex;
    flex-direction: row-reverse; /* Reverse the order of items horizontally */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Key characteristics of row-reverse flex direction:

Items are still laid out horizontally
The order is reversed from right to left
The first item now appears on the right side
The main axis remains horizontal but starts from the right
The cross axis remains vertical

When you view this in a web browser, you'll notice that the items are now arranged from right to left, with "Item 4" appearing first on the left side and "Item 1" on the right side.

This demonstrates how flex-direction: row-reverse allows you to change the visual order of flex items while maintaining a horizontal layout.

Implement Column Flex Direction

In this step, you'll explore the column flex direction, which arranges flex items vertically from top to bottom.

Open the flexbox-demo.html file in the WebIDE and modify the <style> section to set the flex direction to column:

<style>
  .flex-container {
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Add height to make vertical layout visible */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Key characteristics of column flex direction:

Items are now laid out vertically from top to bottom
The main axis is now vertical
The cross axis is now horizontal
Items stack on top of each other
We added a container height to better visualize the vertical layout

When you view this in a web browser, you'll notice that the items are now arranged vertically:

"Item 1" will be at the top
"Item 2" will be below "Item 1"
"Item 3" will be below "Item 2"
"Item 4" will be at the bottom

This demonstrates how flex-direction: column changes the layout from horizontal to vertical, providing a simple way to create vertical layouts using Flexbox.

Implement Column-Reverse Flex Direction

In this step, you'll explore the column-reverse flex direction, which arranges flex items vertically from bottom to top.

Open the flexbox-demo.html file in the WebIDE and modify the <style> section to set the flex direction to column-reverse:

<style>
  .flex-container {
    display: flex;
    flex-direction: column-reverse; /* Arrange items vertically from bottom to top */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Add height to make vertical layout visible */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Key characteristics of column-reverse flex direction:

Items are laid out vertically from bottom to top
The main axis is vertical but starts from the bottom
The cross axis is horizontal
Items are stacked in reverse order
"Item 4" will now appear at the top
"Item 1" will be at the bottom of the container

When you view this in a web browser, you'll observe:

The vertical layout is maintained
The order of items is reversed compared to the standard column direction
The visual hierarchy is inverted

This demonstrates how flex-direction: column-reverse provides a simple way to change the vertical stacking order of flex items.

Summary

In this lab, participants explore the fundamentals of CSS Flexbox by creating a comprehensive demonstration of flex directions. The lab begins with establishing a structured HTML file featuring a flex container and multiple flex items, providing a visual foundation for understanding different layout techniques. By implementing a series of flex direction styles, learners gain practical experience in manipulating element arrangements using CSS Flexbox.

The lab systematically guides participants through four key flex direction configurations: row (default), row-reverse, column, and column-reverse. Each direction is explored through hands-on coding, enabling students to understand how flex-direction impacts the positioning and flow of elements within a container. This approach allows learners to develop a nuanced understanding of flexible box layout principles and their application in responsive web design.