Colevate Online Tech Tutorials

This essential CSS property transforms a block-level element into a flex container. By applying display: flex, you activate the Flexbox model, and all direct children of that element automatically become flex items. This allows you to arrange and align these items along a flex line.

Example 1: Creating a Basic Flex Container

HTML

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

CSS

/* This is the parent container that will hold our flex items. */
.flex-container {
  display: flex; /* This declaration turns the element into a flex container. */
  border: 2px solid #000;
}

/* Basic styling for the flex items for better visibility. */
.item {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

Explanation

The .flex-container div is converted into a flex container by setting its display property to flex. Its direct children, the .item divs, are now flex items and are arranged horizontally by default.

Example 2: Inline Flex Container

HTML

<span>I am text before the container.</span>
<div class="inline-flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>
<span>I am text after the container.</span>

CSS

/* This container will behave like an inline element. */
.inline-flex-container {
  display: inline-flex; /* Creates a flex container that is inline with surrounding content. */
  border: 2px solid #4CAF50;
}

/* Styling for the child items. */
.item {
  background-color: #e7f7e8;
  padding: 15px;
}

Explanation

Using display: inline-flex makes the container an inline-level element, allowing it to sit on the same line as other text or inline elements. The children inside still benefit from flex properties.

Example 3: Nested Flex Containers

HTML

<div class="outer-container">
  <div class="item">Outer 1</div>
  <div class="nested-container">
    <div class="nested-item">Nested 1</div>
    <div class="nested-item">Nested 2</div>
  </div>
  <div class="item">Outer 3</div>
</div>

CSS

/* The main flex container. */
.outer-container {
  display: flex; /* Establishes the primary flex context. */
  border: 2px solid #337ab7;
  padding: 10px;
}

/* The nested div which is also a flex container. */
.nested-container {
  display: flex; /* This flex container is an item of the outer container. */
  border: 2px dashed #f0ad4e;
  margin: 0 10px;
}

Explanation

A flex item can also be a flex container. Here, .nested-container is a flex item of .outer-container and a flex container for the .nested-item elements, allowing for complex, multi-level layouts.

Example 4: Flexbox for Navigation Bar

HTML

<nav class="nav-menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

CSS

/* Using flexbox to create a horizontal navigation menu. */
.nav-menu {
  display: flex; /* Turns the nav element into a flex container. */
  background-color: #333;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-menu a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

Explanation

Applying display: flex to the <nav> element is a modern and efficient way to create a navigation bar. The anchor tags automatically align horizontally, simplifying the code required.

Example 5: Centering a Single Item

HTML

<div class="centering-container">
  <div class="centered-item">Centered!</div>
</div>

CSS

/* A common use case: centering an item both vertically and horizontally. */
.centering-container {
  display: flex; /* Activates flexbox. */
  height: 200px;
  border: 2px solid #d9534f;
  justify-content: center; /* Centers horizontally. */
  align-items: center;     /* Centers vertically. */
}

.centered-item {
  background-color: #f7e6e5;
  padding: 25px;
}

Explanation

By setting display: flex on the parent, we can use the justify-content and align-items properties to perfectly center the child element within the container. This is a classic and highly practical use of Flexbox.

Example 6: Switching from block to flex on Hover

HTML

<div class="dynamic-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS

/* The container starts as a standard block element. */
.dynamic-container {
  display: block;
  border: 2px solid #5bc0de;
  padding: 5px;
  transition: all 0.5s ease; /* Smooth transition for the change. */
}

/* On hover, the container becomes a flex container. */
.dynamic-container:hover {
  display: flex; /* Items will align horizontally when the user hovers. */
}

Explanation

This example demonstrates how display: flex can be used dynamically. The items are initially stacked vertically (display: block), but transition to a horizontal flex layout when the user hovers over the container.

Example 7: A Form Layout with Flexbox

HTML

<form class="flex-form">
  <input type="email" placeholder="Enter your email">
  <button type="submit">Subscribe</button>
</form>

CSS

/* Using flexbox to align form elements. */
.flex-form {
  display: flex; /* Aligns the input and button on the same line. */
  width: 400px;
}

.flex-form input[type="email"] {
  flex-grow: 1; /* Allows the input field to take up available space. */
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-form button {
  padding: 10px 20px;
  border: none;
  background-color: #0275d8;
  color: white;
}

Explanation

display: flex is applied to the form to place the input field and button side-by-side. The flex-grow property is then used on the input to make it expand and fill the remaining space in the container.

CSS

Display Flex