# justify-content
**`justify-content`** aligns a list's content salong the main axis of a *flex container* by distributing space between or around items.

It has six different values that change how the list is aligned:
1. **`flex-start`** -- this is the default value, it positions the items at the start of the container.
2. **`flex-end`** -- positions the items at the end of the container.
3. **`center`** -- places items in the center.
4. **`space-around`** -- places items with space distributed evenly around the start and end of the list.
5. **`space-between`** -- evenly distributes space items between the first item is set at the start of the container, and the last item is set at the end.
6. **`space-evenly`** -- spaces items such that they have equal amounts of space before and after them.

# Usage
The following example demonstrates `justify-content`:

.flex-start{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}
.flex-start li{
  background-color: lightgoldenrodyellow;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.flex-end{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
.flex-end li{
  background-color: powderblue;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.center{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}
.center li{
  background-color: lightsalmon;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.space-around{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}
.space-around li{
  background-color: lightgrey;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.space-between{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.space-between li{
  background-color: rgb(119, 186, 227);
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}
.space-evenly{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-evenly;
}
.space-evenly li{
  background-color: rgb(235, 218, 134);
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  text-align: center;
}

codemirror

Here, `justify-content` has been used in the following order:
1. `flex-start`
2. `flex-end`
3. `center`
4. `space-around`
5. `space-between`
6. `space-evenly`

In order to use `justify-content`, all you need is the `justify-content: desired value` and `display: flex` properties. The rest are just for styling.

How to Space Items using justify-content

justify-content aligns items along a flex container’s main axis with six alignment options: flex-start, flex-end, center, space-around, space-between, and space-evenly.