justify-content

justify-content positions flex items along the main axis and grid tracks along the inline axis. With flex-direction: row and horizontal writing, that usually means horizontally.

Smallest working example

<div class="layout">
  <div>Start</div>
  <div>Middle</div>
  <div>End</div>
</div>

.layout {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
/* Optional presentation */
.layout {
  border: 1px solid #64748b;
  padding: 8px;
}
.layout > div {
  padding: 8px;
  background: #dbeafe;
}

The first and last items sit at the outer edges; remaining free space goes between them. Compare center, space-around, and space-evenly in the editor.

Values and defaults

The initial value is normal; the property is not inherited. In Flexbox this normally behaves like flex-start. start, end, and center position the group. space-between removes outer distribution space, space-around gives half-size outer space, and space-evenly makes the outer and inner spaces equal. stretch can enlarge auto-sized grid tracks but does not stretch flex items along their main axis. Use flex-grow for that.

baseline is not a justify-content value. safe center protects against inaccessible centered overflow.

A practical use

Place a logo and a navigation group at opposite edges with space-between. Give the container enough width and keep the DOM in the intended reading order.

Why it may do nothing

Items with flex-grow or auto margins can consume the available space before distribution. Grid columns defined with 1fr can also fill all available width. justify-items aligns items inside grid areas instead of positioning the track group.

A second working case

<div class="topics"><span>HTML</span><span>CSS</span></div>

.topics {
  display: grid;
  grid-template-columns: 5rem 5rem;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #64748b;
}
.topics span {
  padding: 0.5rem;
  background: #dbeafe;
}

Fixed tracks leave inline space around the column group. Change center to space-between to move the group’s columns toward the container edges; the item widths stay the same.

Sources and browser support

MDN: justify-content describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.