Flexbox Justify Content

CSS justify-content Property

The justify-content property aligns the flex items along the main-axis (horizontally).

This property can have one of the following values:

center

flex-start (default)

flex-end

space-around

space-between

space-evenly

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: center;
}

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: flex-start;
}

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: flex-end;
}

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: space-around;
}

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: space-between;
}

Example

Example Code

css

Try it Yourself

.flex-container {

  display: flex;

  justify-content: space-evenly;
}

CSS justify-content Property

Example

Example Code

Example

Example Code

Example

Example Code

Example

Example Code

Example

Example Code

Example

Example Code

Interactive Code Examples

CSS Example 1

CSS Example 2

CSS Example 3

CSS Example 4

CSS Example 5

CSS Example 6