0
0
CSSmarkup~5 mins

Justify content in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Justify content helps you control how items line up horizontally inside a container. It makes your page look neat and balanced.

When you want to spread buttons evenly across a toolbar.
When you need to center a group of images in a row.
When you want space between text blocks in a navigation menu.
When you want items to stick to the left or right side of a box.
When you want to create equal gaps between cards in a gallery.
Syntax
CSS
.container {
  display: flex;
  justify-content: value;
}

You must set display: flex; or display: grid; on the container first.

The value controls how items align horizontally.

Examples
Items align to the left side (start) of the container.
CSS
.container {
  display: flex;
  justify-content: flex-start;
}
Items are centered horizontally inside the container.
CSS
.container {
  display: flex;
  justify-content: center;
}
Items spread out with equal space between them, edges align with container sides.
CSS
.container {
  display: flex;
  justify-content: space-between;
}
Items have equal space around them, including edges.
CSS
.container {
  display: flex;
  justify-content: space-around;
}
Sample Program

This example shows three blue boxes spaced evenly across a gray container using justify-content: space-between;. The boxes appear at the left, center, and right with equal space between them.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Justify Content Example</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      background-color: #f0f0f0;
      padding: 1rem;
      border: 2px solid #ccc;
      max-width: 600px;
      margin: 2rem auto;
    }
    .box {
      background-color: #4a90e2;
      color: white;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      font-weight: bold;
      user-select: none;
    }
  </style>
</head>
<body>
  <section class="container" aria-label="Justify content example">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

If you use justify-content without display: flex or display: grid, it won't work.

Try changing the justify-content value in the sample to see how the layout changes.

Use browser DevTools (right-click > Inspect) to experiment with justify-content live on any page.

Summary

Justify content controls horizontal alignment of items inside a flex or grid container.

Common values: flex-start, center, space-between, space-around.

It helps make layouts look balanced and organized.