CSS justify-content Property

Definition and Usage

The justify-content property distributes free space between and around content along the main axis of a flex container, and along the inline axis of a grid or multicol container.

In a row flex, that means left–right packing: center, space-between, and friends. There must be leftover free space, or every keyword looks the same. It does not apply to normal block boxes. To align items on the cross axis, use align-items. To pack wrapped lines, use align-content.

CSS Syntax

Also valid: start, end, left, right, and optional safe / unsafe before a position keyword.

Property Values

How to Use justify-content

Make a flex or grid container wider than its items (or tracks), then choose how free space is shared.

1. Set display: flex or display: grid on the container.
2. Leave free space on the main / inline axis (a wider box, or fixed-size items that do not grow).
3. Keep flex-grow at 0 on study examples so free space remains for distribution.
4. Set justify-content on the container. It is not inherited.

Live Preview

Three fixed-width flex items in a wider row. Change justify-content and watch the free space move.

CSS Examples

Each snippet keeps only what justify-content needs: a container, free space, and fixed-size children. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    justify-content: center;
    border: 1px solid #ccc;
  }
  div {
    width: 60px;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
  }
  div {
    width: 60px;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 60px 60px 60px;
    justify-content: space-evenly;
    border: 1px solid #ccc;
  }
</style>

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

Key Takeaways