justify-content

justify-content aligns flex items along the main axis (horizontal for row, vertical for column). It controls spacing and alignment of items within the container.

Justify Content Values

Value	Alignment	Spacing
flex-start	Start of axis	No space between
flex-end	End of axis	No space between
center	Center	Equal space sides
space-between	Spread out	Space between items
space-around	Spread out	Space around items
space-evenly	Spread out	Equal space all around

CSS

/* Start (default) */
.container {
  display: flex;
  justify-content: flex-start;
  /* Items at beginning of axis */
}

/* End */
.container {
  display: flex;
  justify-content: flex-end;
  /* Items at end of axis */
}

/* Center */
.container {
  display: flex;
  justify-content: center;
  /* Items centered */
}

/* Space between */
.container {
  display: flex;
  justify-content: space-between;
  /* Even spacing, items touch edges */
}

/* Space around */
.container {
  display: flex;
  justify-content: space-around;
  /* Space on all sides of items */
}

/* Space evenly */
.container {
  display: flex;
  justify-content: space-evenly;
  /* Equal space everywhere */
}

Practical Examples

CSS

/* Navigation with spacing */
nav {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  background: #333;
}

/* Header with logo and buttons */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

/* Centered button */
.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

/* Spread footer links */
.footer {
  display: flex;
  justify-content: space-evenly;
  padding: 30px 0;
  border-top: 1px solid #ddd;
}

Note

justify-content aligns items on main axis. Use space-between for headers, center for buttons, space-evenly for even distribution.

Align items: [align-items & align-content](/css/align-items).