How to Use Flexbox in CSS for Layout

Flexbox is one of the most popular CSS features for building web page layouts. With Flexbox, you can arrange element positions horizontally and vertically easily without needing floats or complicated positioning. This article covers how to use Flexbox from the basics to practical examples you can try right away.

What Is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that lets elements inside a container be arranged flexibly. There are two main concepts in Flexbox:

• Flex Container — the parent element given the display: flex property.
• Flex Item — the direct child elements inside the flex container.

How to Enable Flexbox

To enable Flexbox, just add display: flex to the container element:

.container {
  display: flex;
}

All child elements inside .container automatically become flex items.

Main Flex Container Properties

Here are the important properties applied to the flex container:

1. flex-direction

Determines the direction the flex items are arranged.

.container {
  display: flex;
  flex-direction: row;        /* default: left to right */
  /* flex-direction: column; */ /* top to bottom */
  /* flex-direction: row-reverse; */
  /* flex-direction: column-reverse; */
}

2. justify-content

Sets the alignment of flex items along the main axis (horizontal if row).

.container {
  display: flex;
  justify-content: center;        /* center */
  /* justify-content: flex-start; */  /* left (default) */
  /* justify-content: flex-end; */    /* right */
  /* justify-content: space-between; */ /* even spacing */
  /* justify-content: space-around; */
}

3. align-items

Sets the alignment of flex items along the cross axis (vertical if row).

.container {
  display: flex;
  align-items: center;      /* vertically centered */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: stretch; */ /* default */
}

4. flex-wrap

Allows flex items to move to a new line if they don't fit.

.container {
  display: flex;
  flex-wrap: wrap; /* items wrap to a new line if they overflow */
}

Flex Item Properties

Besides the container properties, there are properties applied directly to flex items:

flex-grow, flex-shrink, flex-basis

.item {
  flex-grow: 1;    /* the item can grow to fill space */
  flex-shrink: 1;  /* the item can shrink if needed */
  flex-basis: 200px; /* the item's initial size */
}

/* Shorthand */
.item {
  flex: 1 1 200px;
}

Practical Example: A Three-Column Layout

Here is an example of building a three-column layout commonly used on websites:

<!-- HTML -->
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

<!-- CSS -->
<style>
.container {
  display: flex;
  gap: 16px;
}

.column {
  flex: 1;
  background: #f0f4ff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
</style>

Practical Example: Centering an Element Horizontally and Vertically

One of the most popular uses of Flexbox is centering content perfectly:

<div class="center-box">
  <p>I'm centered!</p>
</div>

<style>
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #e8f5e9;
}
</style>

Example: A Navbar with Flexbox

Flexbox is also very well suited for building a navigation bar:

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #1e293b;
  color: white;
}

.menu {
  display: flex;
  list-style: none;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.menu a {
  color: white;
  text-decoration: none;
}
</style>

Tips for Using Flexbox

• Use the gap property to add spacing between items without needing margins.
• Combine flex-wrap: wrap with flex-basis for a simple responsive layout.
• Use order on flex items to change the display order without changing the HTML.
• Flexbox works best for one-dimensional layouts (a row or a column). For two dimensions, consider CSS Grid.

Conclusion

Flexbox is a very powerful tool for building neat and flexible web layouts. By understanding properties like display: flex, justify-content, align-items, and flex-wrap, you can already handle most modern layout needs. Start practicing with the examples above, and you'll get more and more comfortable using it in real projects.