CSS justify-content Property

Description

The justify-content property controls how the available free space inside a container is allocated along the container’s main axis and where the children are placed within that axis. It governs the overall packing and spacing of the items as a group rather than the alignment of each individual item on the cross axis. To take effect, the container must be using a layout mode that exposes a main axis (for example, when its display creates a flex or grid formatting context).

When the container has a single line of items, justify-content affects the placement of that entire run of items within the container; when there are multiple lines (for example, a wrapped flex container), each line’s internal distribution is still influenced by justify-content, while distribution of space between the lines themselves is handled by align-content. For per-item alignment on the cross axis (perpendicular to the main axis), a different property, align-items, is used — so layout behavior is often determined by a combination of these properties acting on orthogonal axes. In flex layouts the direction of the main axis is defined by flex-direction, so the visual effect of justify-content depends on that direction.

In practical use, justify-content is a primary tool for controlling visual balance and spacing in horizontal or vertical sequences of components: it can shift a group of items toward one side of the container, create even spacing between items, or concentrate them together while leaving open space elsewhere. Designers commonly combine it with item sizing, wrapping behavior, and container dimensions to achieve responsive arrangements without changing the DOM order. Note that justify-content moves items visually along the main axis; it does not alter the document source order or inherent accessibility order by itself.

Definition

Initial value: flex-start
Applies to: Flex containers
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.justifyContent

Interactive Demo

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

One

Two

Three

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Values

flex-startElements are positioned at the beginning of the container. This is the default value. For layout grid elements (grid elements), the abbreviated start value is allowed; for flex elements, the full flex-start value must be used.
flex-endElements are positioned at the end of the container. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
centerElements are positioned in the center of the container.
space-betweenElements are evenly distributed throughout the line, with the first element being positioned at the beginning of the container, and the last element being positioned at the end of the container.
space-aroundElements are evenly distributed throughout the row, with the empty space between the first and after the last element equal to half between adjacent elements in the container.
space-evenlyPlaces an even gap between each element, including the beginning and the far end of the container.

Example

HTML

<div class='wrapper'>

  <h1>justify-content examples</h1>



  <div class='example'>

    <div class='label'>flex-start</div>

    <div class='container justify-flex-start'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>



  <div class='example'>

    <div class='label'>center</div>

    <div class='container justify-center'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>



  <div class='example'>

    <div class='label'>flex-end</div>

    <div class='container justify-flex-end'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>



  <div class='example'>

    <div class='label'>space-between</div>

    <div class='container justify-space-between'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>



  <div class='example'>

    <div class='label'>space-around</div>

    <div class='container justify-space-around'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>



  <div class='example'>

    <div class='label'>space-evenly</div>

    <div class='container justify-space-evenly'>

      <div class='item'>1</div>

      <div class='item'>2</div>

      <div class='item'>3</div>

    </div>

  </div>

</div>

CSS

/* Basic page styles */
body {
  margin: 24px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f7f8fa;
  color: #111;
}

.wrapper {
  max-width: 880px;
  margin: 0 auto;
}

h1 {
  font-size: 18px;
  margin-bottom: 16px;
}

.example {
  margin-bottom: 18px;
}

.label {
  font-size: 13px;
  color: #444;
  margin-bottom: 8px;
}

/* Flex container common styles */
.container {
  display: flex;
  align-items: center; /* vertical alignment within the row */
  height: 64px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
  border: 1px solid #e3e7ea;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(16,24,32,0.02);
}

/* Individual items */
.item {
  width: 48px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0ea5a4;
  color: white;
  font-weight: 600;
  border-radius: 6px;
}

.item + .item {
  margin-left: 8px; /* a small gap so items are visually distinct when packed together */
}

/* Examples of different justify-content values */
.justify-flex-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-flex-end { justify-content: flex-end; }
.justify-space-between { justify-content: space-between; }
.justify-space-around { justify-content: space-around; }
.justify-space-evenly { justify-content: space-evenly; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS justify-content property. Hover over a browser icon to see the version that first introduced support for this CSS property.