# CSS Flexbox: justify-content

Hello Fellow Codenewbies 👋

We've learned in the [previous post](https://adiati.com/a-dip-into-css-flexbox) that applying `display: flex` to a flex container by default will turn flex items into columns. 
<br>
And when the total width of flex items is bigger than the container, they will stretch to fit the horizontal axis of the flex container.

There could be a case where we have extra space when *the flex container's width is bigger* than the total width of the flex items as below:

%[https://codepen.io/adiati/pen/poEyYyx]

---
# Spacing Out The Columns With Flexbox

How to give space to the columns so the layout would fall nicely into places?
<br>
There is a property that controls the space on the *main axis* (horizontal position) of a flex container.
<br>
That property is [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
<br>

📝 **Note**: 
<br>
We always put flex properties in the same place where we assign `display: flex`.

## The Values of `justify-content`

### space-between
 What it does is it takes the extra space, divides it, and put them ***between*** the columns.
<br>
⭐ This value is commonly used to space out columns.

![space-between.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607338967596/oo2A2QI0m.jpeg)

### space-around
It does the same as `space-between`, but the difference is that it puts the extra space ***around*** a column.


![space-around.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607340419257/SXuDeCcAu.jpeg)
*I draw partitions so you can see the spaces on the left and the right of each column.*

### space-evenly
Visually `space-evenly` makes the layout look balance because it divides and puts the extra space ***evenly***.

![space-evenly.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607340555406/eoHlGnjU8.jpeg)
<br>

#### Now, what if we want to position all of our columns on one side and not worrying about the space?
<br>

### flex-start
This is the **default** value of `justify-content`.
<br>
It makes the columns positioned to the ***left*** (start) of the flex container.

![flex-start.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607342011796/j-0WUo58E.jpeg)

### center
As the name stated, it is positioned the columns to the ***center*** of the flex container.

![center.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607342158607/E_WC0XdPr.jpeg)

### flex-end
It is positioned the columns to the ***right*** (end) of the flex container.

![flex-end.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607342204248/4MP4xWVkV.jpeg)

## Conclusion
- `justify-content` property works with *main axis* (horizontal position) and is used to space out columns in a flex container.
- When we care about spacing for the layout, we can use one of these values:
  - space-between
  - space-around
  - space-evenly
- When we are not worrying about spacing and want to position the columns on one side, we can use one of these values:
  - flex-start (***default***)
  - center
  - flex-end