docs.rodeo

MDN Web Docs mirror

justify-content

{{CSSRef}} 

The CSS justify-content property defines how the browser distributes space between and around content items along the {{Glossary("main axis")}}  of a flex container and the inline axis of grid and multicol containers.

The interactive example below demonstrates some justify-content values using grid layout.

{{EmbedInteractiveExample("pages/css/justify-content.html")}} 

Syntax

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

Values

Description

Defined in the CSS box alignment module, justify-content applies to multicol containers, flex containers, and grid containers. The property does not apply to and has no effect on block containers.

This property shares many keyword values with the {{cssxref("align-content")}}  property, but not all! justify-content isn’t involved in baseline alignment, and therefore does not take baseline values.

In flex layouts, the property defines how positive free space is distributed between or around flex items along the main axis. This property impacts the space between elements in a line, not the space between lines. The alignment is done after the lengths and auto margins are applied, which means that when one or more flex items in a line have a {{cssxref("flex-grow")}}  factor greater than 0, the property has no effect as there is no space to distribute along that line. Also, as stretching along the main axis is controlled by {{cssxref("flex")}} , the stretch value behaves as flex-start.

With grid layout, this property distributes available space between or around grid columns, not grid items. If the grid container is larger than the grid itself, the justify-content property can be used to justify the grid along the inline axis, aligning the grid columns.

Grid auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. Therefore by default, an auto sized track will take up any remaining space in the grid container. As the grid’s inline size has to be less than the grid container’s inline size for there to be space to distribute, the property has no effect in this case.

Formal definition

{{cssinfo}} 

Formal syntax

{{csssyntax}} 

Examples

Basic grid example

In this example, we have a grid that is narrower than its grid container, and we use justify-content to distribute the available space evenly around and between the grid columns.

HTML

The {{htmlelement("section")}}  container, our grid container to-be, has 16 nested {{htmlelement("div")}} s that will become grid items.

<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

.container {
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

We set the container width to 500px and specify three columns, each 80px wide, meaning there is 260px of available space to distribute between or around them. We then set justify-content: space-evenly, which means there will be 65px of space before, between, and after each column.

We set different widths (and background colors) to demonstrate how the justification is applied to the columns.

.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

Result

{{EmbedLiveSample("Basic grid example", "100%", 220)}} 

Note that justify-contents aligns the columns and has no effect on the items or alignment in grid areas. Grid items, even those that overflow their grid cell, do not impact column justification.

The safe keyterm

This example demonstrates the safe keyterm. We specify four centered flex items that are not allowed to wrap, and as a result, overflow their single flex-line container. By adding safe to center in the justify-content property, overflowing content behaves as if the alignment mode is start

<p><code>justify-content: center;</code></p>
<section class="container safe">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code></p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code> with 3 items</p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

.container {
  margin: 5px auto;
  border: 1px dashed;
  box-sizing: border-box;
  background-color: lightblue;
}

div {
  line-height: 1em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
  background-color: pink;
}

The container is set to center, with every container other than the first having the safe keyword added:

.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

Result

{{EmbedLiveSample("the safe keyword", "100%", 260)}} 

As an item overflows the alignment container, with safe included the alignment mode behaves as start and the center alignment is not implemented. The safe keyterm has no effect if the items do not overflow the container.

Visualizing flex item distribution

This example includes a multi-line wrapping flex layout. The second flex item has a positive flex growth factor, consuming all the available free space in the first flex line.

CSS

#container {
  margin: 5px auto;
  border: 1px dashed black;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

<section id="container">
  <div>A</div>
  <div>GROW</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

Result

{{EmbedLiveSample("Visualizing_flex_item_distribution", "100%", 180)}} 

Select different keywords from the drop-down menu to visualize the different justify-content keyword values. Because an item on the first line can grow, there is no available space on that line for the justify-content property to distribute. With the space-between value, the first item on each line is flush with the main-start edge, and the last item is flush with the main-end edge. As a result, if a line has only one item, it will be aligned with the main-start edge (as seen in the last line). This is not the case for other space-* values, such as space-evenly and space-around, which center one-item flex-lines.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN