CSS Flexbox: A Complete Guide to Flexible Box Layout

Live editor for all the examples will be added soon.

The CSS Flexbox (Flexible Box Layout) is a layout model that allows you to create flexible and responsive layouts with ease. It enables you to align items within a container, distribute space between them, and control their size and positioning—even when the size of the container is unknown. Flexbox is particularly useful for designing complex layouts that adjust to different screen sizes.

In this guide, we’ll cover the basics of Flexbox, explain its key properties, and provide examples to demonstrate how it works.

1. What is Flexbox?

Flexbox is a one-dimensional layout model that helps you arrange items either in a row or column. It is ideal for distributing space and aligning items, even when their sizes are dynamic or unknown. Flexbox operates on two levels:

The flex container (parent element).
The flex items (child elements within the container).

How to Enable Flexbox

To enable Flexbox, you simply apply display: flex; to a container. This makes the container a flex container, and all of its direct children become flex items.

Example of Basic Flexbox:

.container {
  display: flex;
}

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

2. Main Concepts of Flexbox

Flex Container

The flex container is the parent element where Flexbox properties are applied. This container controls the behavior of its children (flex items). Once the container is set to display: flex;, you can use a range of Flexbox properties to manage the layout.

Flex Items

Flex items are the direct children of the flex container. These items automatically become flexible, meaning their size and position can be adjusted using Flexbox properties.

3. Flexbox Properties

Properties for the Flex Container

These properties control how the flex container behaves and how the items inside it are aligned.

3.1 `flex-direction`

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

row: The items are placed in a row (default).
row-reverse: The items are placed in a row, but reversed.
column: The items are placed in a column.
column-reverse: The items are placed in a column, but reversed.

Syntax:

.container {
  display: flex;
  flex-direction: row; /* or column */
}

Example:

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

This makes the items stack vertically.

3.2 `justify-content`

The justify-content property controls how the items are aligned along the main axis (horizontally by default).

flex-start: Items are aligned at the start 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 spaced, with the first item at the start and the last item at the end.
space-around: Items are evenly spaced, with equal space around each item.

Syntax:

.container {
  display: flex;
  justify-content: center;
}

Example:

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

This spaces the items out evenly, with the first item at the start and the last at the end of the container.

3.3 `align-items`

The align-items property controls how the flex items are aligned along the cross axis (vertically by default).

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

Syntax:

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

Example:

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

This aligns all the items at the top of the container.

3.4 `flex-wrap`

The flex-wrap property controls whether the flex items should wrap onto multiple lines if they overflow the container.

nowrap: All items are placed in one line (default).
wrap: Items wrap onto multiple lines when they don’t fit in one line.
wrap-reverse: Items wrap onto multiple lines in reverse order.

Syntax:

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

Example:

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

This makes the items wrap to the next line when they overflow the container’s width.

Properties for the Flex Items

These properties control the behavior of individual flex items within the container.

3.5 `flex-grow`

The flex-grow property controls how much a flex item should grow relative to the other items inside the container. It takes a unitless number as a value.

0: The item will not grow (default).
1: The item will grow and take up the available space.

Syntax:

.item {
  flex-grow: 1;
}

Example:

.item {
  flex-grow: 2;
}

This means the item will grow twice as fast as other items that have flex-grow: 1.

3.6 `flex-shrink`

The flex-shrink property controls how much a flex item should shrink when there is not enough space in the container.

1: The item will shrink (default).
0: The item will not shrink.

Syntax:

.item {
  flex-shrink: 0;
}

This prevents the item from shrinking when the container size is reduced.

3.7 `flex-basis`

The flex-basis property defines the initial size of a flex item before any extra space is distributed.

It can be set to a length (e.g., 200px) or a percentage.

Syntax:

.item {
  flex-basis: 150px;
}

This sets the item’s size to 150px before any other flex properties like flex-grow or flex-shrink are applied.

3.8 `align-self`

The align-self property allows individual flex items to be aligned differently from the other items within the same container.

auto: Inherits the value from align-items.
flex-start: Aligns the item at the start of the cross axis.
flex-end: Aligns the item at the end of the cross axis.
center: Centers the item along the cross axis.
baseline: Aligns the item’s baseline.
stretch: Stretches the item to fill the container (default).

Syntax:

.item {
  align-self: center;
}

This centers the specific item along the cross axis, even if the other items are aligned differently.

4. Practical Example: Building a Simple Flexbox Layout

Here’s a practical example of how to create a basic responsive layout using Flexbox. This layout will contain a header, a main content area, and a sidebar.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* Flex container for the layout */
    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Header section */
    .header {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 20px;
    }

    /* Main content and sidebar container */
    .main-content {
      display: flex;
      flex: 1;
    }

    /* Main section */
    .main {
      flex: 3;
      background-color: lightgrey;
      padding: 20px;
    }

    /* Sidebar section */
    .sidebar {
      flex: 1;
      background-color: #f1f1f1;
      padding: 20px;
    }

    /* Footer section */
    .footer {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="container">
    <!-- Header -->
    <div class="header">
      <h1>Flexbox Layout Example</h1>
    </div>

    <!-- Main content and sidebar -->
    <div class="main-content">
      <div class="main">
        <h2>Main Content</h2>
        <p>This is the main content area. It takes up more space than the sidebar.</p>
      </div>
      <div class="sidebar">
        <h2

>Sidebar</h2>
        <p>This is the sidebar.</p>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <p>Footer Section</p>
    </div>
  </div>

</body>
</html>

Explanation:

Flex Container: The .container div is set to display: flex;, and it stacks the header, main content, and footer vertically using flex-direction: column;.
Main Content: Inside the .main-content container, the main section (.main) takes up more space (flex: 3;) than the sidebar (flex: 1;).
Footer: The footer stays at the bottom of the page, even when content is minimal, thanks to flex: 1; on the main content container.

Conclusion

CSS Flexbox is a powerful layout model that simplifies the process of creating responsive, flexible designs. By using Flexbox properties, you can control how elements behave within a container, distribute space, and align items with precision. Whether you are building a simple webpage or a complex web application, Flexbox provides the tools to create adaptable layouts that work on any screen size.

1. What is Flexbox?

How to Enable Flexbox

Example of Basic Flexbox:

2. Main Concepts of Flexbox

Flex Container

Flex Items

3. Flexbox Properties

Properties for the Flex Container

3.1 flex-direction

Syntax:

Example:

3.2 justify-content

Syntax:

Example:

3.3 align-items

Syntax:

Example:

3.4 flex-wrap

Syntax:

Example:

Properties for the Flex Items

3.5 flex-grow

Syntax:

Example:

3.6 flex-shrink

Syntax:

3.7 flex-basis

Syntax:

3.8 align-self

Syntax:

4. Practical Example: Building a Simple Flexbox Layout

HTML:

Explanation:

Conclusion

3.1 `flex-direction`

3.2 `justify-content`

3.3 `align-items`

3.4 `flex-wrap`

3.5 `flex-grow`

3.6 `flex-shrink`

3.7 `flex-basis`

3.8 `align-self`