CSS Flexbox

Introduction

Flexbox, short for Flexible Box Layout, is a powerful CSS module designed to provide an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. It simplifies the process of creating responsive designs by allowing developers to easily manage the alignment and spacing of elements within a container.

Concept

The core idea behind flexbox is to create a one-dimensional layout where items can be aligned along either the main axis (horizontally) or the cross axis (vertically). Flexbox provides several properties that control how these items are laid out, including:

• Flex Direction: Determines the direction in which the flex items are placed in the container.
• Justify Content: Controls the alignment of flex items along the main axis.
• Align Items: Controls the alignment of flex items along the cross axis.
• Flex Wrap: Specifies whether flex items should wrap or not.

Examples

Let's explore some practical examples to understand how flexbox works in responsive design.

Basic Flex Container

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between; /* Distributes items evenly */
  align-items: center; /* Aligns items vertically in the middle */
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  padding: 20px;
  background-color: lightblue;
}

<OutputBlock>
{`<div style="display: flex; justify-content: space-between; align-items: center; height: 200px; border: 1px solid #ccc;">
  <div style="padding: 20px; background-color: lightblue;">Item 1</div>
  <div style="padding: 20px; background-color: lightblue;">Item 2</div>
  <div style="padding: 20px; background-color: lightblue;">Item 3</div>
</div>`}
</OutputBlock>

### Responsive Flex Container

```html
<div class="responsive-flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.responsive-flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap */
  justify-content: space-around; /* Distributes items evenly with space around them */
  align-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  padding: 20px;
  background-color: lightcoral;
  flex: 1 1 30%; /* Each item takes up at least 30% of the container's width */
}

<OutputBlock>
{`<div style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 200px; border: 1px solid #ccc;">
  <div style="padding: 20px; background-color: lightcoral; flex: 1 1 30%;">Item 1</div>
  <div style="padding: 20px; background-color: lightcoral; flex: 1 1 30%;">Item 2</div>
  <div style="padding: 20px; background-color: lightcoral; flex: 1 1 30%;">Item 3</div>
</div>`}
</OutputBlock>

### Flex Direction

```html
<div class="flex-direction-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.flex-direction-container {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  justify-content: space-between;
  align-items: center;
  height: 400px;
  border: 1px solid #ccc;
}

.item {
  padding: 20px;
  background-color: lightgreen;
}

<OutputBlock>
{`<div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 400px; border: 1px solid #ccc;">
  <div style="padding: 20px; background-color: lightgreen;">Item 1</div>
  <div style="padding: 20px; background-color: lightgreen;">Item 2</div>
  <div style="padding: 20px; background-color: lightgreen;">Item 3</div>
</div>`}
</OutputBlock>

## What's Next?

In the next section, we will explore HTML Links and how they can be styled using CSS to enhance user navigation on your website.