How to Space Elements Evenly with Flexbox’s Justify Content Property

by

Flexbox is a powerful CSS layout module that makes it easy to align and distribute space among items in a container. One of its most useful features is the justify-content property, which controls how space is distributed along the main axis of a flex container. This article explains how to use justify-content to space elements evenly.

Understanding the Justify-Content Property

The justify-content property offers several options for spacing flex items:

  • flex-start: Items are packed toward the start of the container.
  • center: Items are centered with equal space around them.
  • flex-end: Items are packed toward the end of the container.
  • space-between: Items are evenly distributed with the first item at the start and the last at the end.
  • space-around: Items are evenly distributed with equal space around each item.
  • space-evenly: Items are evenly distributed with equal space between and around them.

How to Use Space-Evenly

To evenly space elements, set the justify-content property to space-evenly. Here is a simple example:

display: flex; creates a flex container. Then, justify-content: space-evenly; distributes the items with equal space around them.

Example CSS:

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

Practical Example

Suppose you have three buttons that you want to space evenly across a header. Your HTML might look like this:

<div class="container">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>

And the CSS:

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

Conclusion

Using justify-content: space-evenly; in Flexbox allows you to distribute elements with equal spacing between and around them. This technique is simple yet effective for creating balanced and visually appealing layouts in your web projects.