Flexbox is a powerful layout module in CSS that enables developers to design flexible, responsive layouts without the need for complex floats or positioning. It simplifies the alignment of elements and gives you control over the layout in both row and column directions. This practical guide will teach you how to master CSS Flexbox for building flexible layouts for websites.

Prerequisites

  • A basic understanding of HTML and CSS.
  • A code editor (such as Visual Studio Code or Sublime Text).
  • A modern web browser (such as Chrome or Firefox) for testing.

Step 1: Understanding the Flexbox Model

Flexbox, short for "flexible box," is a one-dimensional layout system. It means you can use it to lay out items in a row or a column, but not both at the same time. However, it’s an excellent tool for distributing space among elements in your design.

Flexbox is applied to a container, and its immediate children become flex items. It provides several properties to control the layout inside the container and the alignment of the items.

Flex Container

To use Flexbox, you first need to declare a flex container. You do this by setting the display property of the container to flex.

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

.container {
  display: flex;
}

Now that the container is a flex container, all direct child elements (.item) become flex items. Let’s dive into the core properties that control the layout.

Step 2: Flexbox Properties for the Container

Several CSS properties control how the flex container behaves and how the flex items are positioned within the container. Let’s go over the most important ones.

1. flex-direction

The flex-direction property defines the direction in which the flex items are placed in the container.

  • row (default): The items are placed horizontally, from left to right.
  • row-reverse: The items are placed horizontally but in reverse order (from right to left).
  • column: The items are placed vertically, from top to bottom.
  • column-reverse: The items are placed vertically but in reverse order (from bottom to top).

Example:

.container {
  display: flex;
  flex-direction: column;
}

This will stack the items vertically inside the container.

2. justify-content

The justify-content property aligns flex items along the main axis (the direction set by flex-direction).

  • flex-start: Items are aligned at the beginning of the container (default).
  • flex-end: Items are aligned at the end of the container.
  • center: Items are centered along the main axis.
  • space-between: Items are evenly distributed with space between them, but no space on the outer edges.
  • space-around: Items are evenly distributed, with space around them (half-sized space on the outer edges).
  • space-evenly: Items are evenly distributed with equal space between them and on the outer edges.

Example:

.container {
  display: flex;
  justify-content: space-between;
}

3. align-items

The align-items property aligns flex items along the cross axis (perpendicular to the main axis).

  • stretch: Items stretch to fill the container (default).
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are centered along the cross axis.
  • baseline: Items are aligned based on their text baselines.

Example:

.container {
  display: flex;
  align-items: center;
}

This will center the items vertically if the flex-direction is row.

4. flex-wrap

By default, flex items are placed in a single line. The flex-wrap property allows the items to wrap onto multiple lines, depending on the available space.

  • nowrap (default): Items are placed in one line.
  • wrap: Items will wrap onto multiple lines.
  • wrap-reverse: Items will wrap onto multiple lines but in reverse order.

Example:

.container {
  display: flex;
  flex-wrap: wrap;
}

5. align-content

The align-content property controls the alignment of the entire flex container when there is extra space along the cross axis. It only applies when flex items wrap onto multiple lines.

  • flex-start: Lines are packed at the top.
  • flex-end: Lines are packed at the bottom.
  • center: Lines are centered.
  • space-between: Lines are evenly distributed with no space at the edges.
  • space-around: Lines are evenly distributed with space around them.
  • stretch (default): Lines are stretched to fill the container.

Example:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Step 3: Flexbox Properties for Items

Flexbox also provides properties for individual flex items that control their behavior within the container.

1. flex-grow

The flex-grow property specifies how much the item will grow relative to the other items. It accepts a unitless number value (e.g., 1, 2, 0.5).

  • A value of 1 makes the item grow to fill any available space, sharing it equally with other items that also have a flex-grow value of 1.
  • A value of 0 prevents the item from growing.

Example:

.item {
  flex-grow: 2;
}

In this case, the item will take up twice as much space as other items with a flex-grow value of 1.

2. flex-shrink

The flex-shrink property specifies how much an item will shrink relative to the other items when space is insufficient.

  • A value of 1 makes the item shrink proportionally.
  • A value of 0 prevents the item from shrinking.

Example:

.item {
  flex-shrink: 0;
}

This will prevent the item from shrinking if the container runs out of space.

3. flex-basis

The flex-basis property defines the default size of an item before the remaining space is distributed.

  • It accepts values like px, %, auto, or content.
  • Setting flex-basis: 0 makes the item take only the space specified by the flex-grow value.

Example:

.item {
  flex-basis: 200px;
}

The item will take up 200px initially, and the remaining space will be distributed based on the other flex properties.

4. align-self

The align-self property allows individual items to override the align-items value of the container.

  • It accepts values like flex-start, flex-end, center, baseline, and stretch.

Example:

.item {
  align-self: flex-end;
}

This will align the specific item at the end of the cross axis, even if other items follow a different alignment rule.

Step 4: Creating a Responsive Flexbox Layout

Let’s create a simple responsive layout using Flexbox.

HTML Structure

<div class="container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="content">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

CSS for Flexbox Layout

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 10px;
}

.nav, .sidebar {
  background-color: #f4f4f4;
  padding: 10px;
}

.content {
  flex-grow: 1;
  padding: 20px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  .nav {
    flex-basis: 200px;
  }

  .content {
    flex-grow: 2;
  }

  .sidebar {
    flex-basis: 200px;
  }

  .footer {
    flex-basis: 100%;
  }
}

Explanation

  • In small screens, the layout is stacked vertically, with each section occupying its own row.
  • On larger screens (min-width: 768px), the layout switches to a row layout with the navigation and sidebar taking fixed widths, while the content area grows to fill the remaining space.

Conclusion

Flexbox is a modern and powerful tool that simplifies the creation of flexible, responsive layouts for web pages. By mastering the properties of the flex container and flex items, you can design layouts that adapt seamlessly to various screen sizes. Continue practicing with more complex layouts to fully leverage the flexibility of Flexbox.