CssConceptBeginner · 3 min read

What is display flex in CSS: Simple Explanation and Examples

display: flex in CSS is a property that makes a container arrange its child items in a flexible way, either in a row or column. It helps control spacing, alignment, and size of items easily without using floats or positioning.

⚙️

How It Works

Imagine you have a box with several smaller boxes inside it. When you set display: flex on the big box, it becomes a flexible container that arranges the smaller boxes in a line, either horizontally or vertically. This is like organizing books neatly on a shelf where you can decide how much space each book takes and how they align.

The flexible container lets you control how the child items grow, shrink, or wrap to the next line if there isn't enough space. This makes layouts much easier to manage compared to older methods like floating elements or using fixed widths.

💻

Example

This example shows a container with three colored boxes arranged in a row using display: flex. The boxes are spaced evenly and aligned in the center.

html and css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  padding: 10px;
}
.box {
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 8px;
}
.box:nth-child(2) {
  background-color: #2196F3;
}
.box:nth-child(3) {
  background-color: #FF5722;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 150px;
      background-color: #f0f0f0;
      border: 2px solid #ccc;
      padding: 10px;
    }
    .box {
      width: 80px;
      height: 80px;
      background-color: #4CAF50;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border-radius: 8px;
    }
    .box:nth-child(2) {
      background-color: #2196F3;
    }
    .box:nth-child(3) {
      background-color: #FF5722;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Output

A horizontal row of three colored boxes labeled 'Box 1', 'Box 2', and 'Box 3', spaced evenly inside a light gray container with a border.

🎯

When to Use

Use display: flex when you want to create layouts that adjust smoothly to different screen sizes or content amounts. It is perfect for navigation bars, card layouts, toolbars, or any group of items that need to line up neatly.

For example, if you want buttons to spread out evenly across a header or images to line up in a row that wraps on smaller screens, flexbox makes this easy without complicated CSS.

✅

Key Points

display: flex creates a flexible container for child items.
Items can be arranged in rows or columns.
It simplifies alignment, spacing, and sizing of elements.
Flexbox adapts well to different screen sizes for responsive design.
It replaces older layout methods like floats and tables for many use cases.

✅

Key Takeaways

display: flex makes a container arrange child elements in a flexible row or column.

Flexbox helps control spacing, alignment, and size easily without complex CSS.

It is ideal for responsive layouts that adjust to different screen sizes.

Use flexbox for navigation bars, buttons, cards, and any grouped items.

Flexbox replaces older layout methods like floats for modern web design.