# justify-content \[row]

**Justify content**\
**The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis.**\
\
f**lex-start;** Items are positioned at the beginning of the container.\
**flex-end;** Items are positioned at the end of the container.\
**center** Items are positioned at the center of the container.\
**space-between;** Items are positioned with space between the lines.\
**space-around;** Items are positioned with space before, between, and after the lines.

![](https://1188262252-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MShOB5olIFJqbXrreDC%2F-MT0mMI1U5wtoanTPnvF%2F-MT0r8o-nPW_fniB6Ac3%2Fflexbox8.png?alt=media\&token=44c7908b-777d-4887-8fb9-ca8233eacc1d)

## justify-content \[row] <a href="#day-12-justify-content-row" id="day-12-justify-content-row"></a>

Here comes the fun part. This is the property that sets alignment along the main axis. In this example, the main axis lies horizontally. In other words, the flex-direction is set to row.

This is probably my most used parent property. You just choose the layout you like and BAM Flexbox automatically does it for you. And it's absolutely responsive. As you grow or shrink the window width, Flexbox will do the behind-the-scene calculation and ensure that your chosen layout is maintained.&#x20;

```css
.parent {
  justify-content: flex-start /* default */
                or flex-end
                or center
                or space-around
                or space-between
                or space-evenly
}
 
```

The **justify-content** property is used to align the flex items:

* The center value aligns the flex items at the center of the container:&#x20;

```css
.flex-container { display: flex; justify-content: center; }
```

* The flex-start value aligns the flex items at the beginning of the container (this is default):&#x20;

```css
.flex-container { display: flex; justify-content: flex-start; }
```

* The flex-end value aligns the flex items at the end of the container:&#x20;

```css
.flex-container { display: flex; justify-content: flex-end; }
```

* The space-around value displays the flex items with space before, between, and after the lines:&#x20;

```css
.flex-container { display: flex; justify-content: space-around; }
```

* The space-between value displays the flex items with space between the lines:&#x20;

```css
.flex-container { display: flex; justify-content: space-between; }
```

![](https://1188262252-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MShOB5olIFJqbXrreDC%2F-MSh_JxR8dnMHxu71l6a%2F-MSh_je9LulTfgL1J8uL%2Fjustify-content-row.jpeg?alt=media\&token=18b55ce0-56c8-435d-967b-f1ace3ab0306)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://irena-popova.gitbook.io/flexbox/justify-content-row.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.