# How to easily understand Flexbox CSS - (Part 2)

Welcome back to this mini series. In [Part 1](https://blog.alanmontgomery.co.uk/how-to-easily-understand-flexbox-css-part-1) we looked at the main `display` property to activate or enable flexbox css on a contrainer element. I also talked about the different types of `flex-direction` you could use. If you missed it you can read Part 1 below, or I also created a [YouTube video](https://www.youtube.com/watch?v=MEWWFZx3h44) to accompany it if you'd prefer that.

%[https://blog.alanmontgomery.co.uk/how-to-easily-understand-flexbox-css-part-1]

Let's get started with Part 2...

# What are you going to learn?
It's all well and good being able to enable flexbox css, create a flex container, and use CSS to tell our elements which way to flow (row or column), however you can also **justify** the content of the whole container as well. This makes it very powerful and easy to position items within a flex container with one bit of CSS.

## Justify Content
By specifying the `justify-content` property on a flex container, you can position the **entire contents** of the container (all child elements inside the parent element). The key point here for this property is *the entire contents*.

```css
.container {

    justify-content:
}
```
You might be familiar with this kind of positioning when using `float` in CSS or even `margin` to space items (elements) out.

### How can you justify content in flexbox css?
There are lots of different values for this property. In fact, there are 16 official flexbox justify content values. That's a lot right? Well, we only need to focus on 6 of them, the most important values and most commonly/needed options. Take a look below...

### Flex Start
```css
.container {

    justify-content: flex-start;
}
```
This value for `justify-content` will align the entire contents of the flex container to the **start** of the container. There won't be any padding or spacing taken into consideration in this case, all items will just be pushed to the start.

![Screenshot 2020-11-14 at 01.00.58.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605315684568/V7b4rftpP.png)

### Flex End
```css
.container {

    justify-content: flex-end;
}
```
> You've probably guessed it by now right? If you did, leave a comment!

This value for `justify-content` is similar to the `flex-start` value however it will align the entire contents of the flex container to the **end** of the container.

![Screenshot 2020-11-14 at 01.01.09.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605315877915/x9s9k3okq.png)

### Center
```css
.container {

    justify-content: center;
}
```
You can also align the entire contents of a flex container into the center on the *horizontal* axis. Again, quite like the first two options/values, the items inside the flex container will not have any padding or margin around them, unless specified obviously.

![Screenshot 2020-11-14 at 01.07.49.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605316082447/Xr_YIyBde.png)

...The next three `justify-content` values are a bit more powerful and popular for aligning content in a nice readable format.

### Space Between
```css
.container {

    justify-content: space-between;
}
```
Using this value, the `space-between` justify-content value will space out the items inside the flex container throughout the whole row or column. For example if you had three items (elements) inside a flex container, the first one would be aligned to the start (*flex-start*), the second to the center (*center*) and the third to the end (*flex-end*).

![Screenshot 2020-11-14 at 01.11.54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605316320690/_YPAbt0R_.png)

### Space Around
```css
.container {

    justify-content: space-around;
}
```
This value will ensure that there is adequate space **around** the items within the flex container. For example, there will be equal amounts of space from the start of the container compared to the end of the container, with the second item being in the center.

![Screenshot 2020-11-14 at 01.15.27.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605316533191/U0y79NR0d.png)

### Space Evenly
```css
.container {

    justify-content: space-evenly;
}
```
Quite like the other two; `space-between` and `space-around`, the `space-evenly` will also provide spacing or "padding" around the items inside the flex container. The only difference with this value is that all spacing inside the flex container will be **equal** or *evenly* distributed.

![Screenshot 2020-11-14 at 01.15.50.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605316561093/fXVmoTFdr.png)

Those are the main, most important values that you should focus on when using the `justify-content` CSS property using flexbox. Feel free to look into the other options available however the only other ones that may be of use would be `baseline` most likely which would align items at the bottom base of the flex container.

I hope you enjoyed Part 2 of this mini series! Are you understanding flexbox CSS a little more? Please let me know by replying if you are! 🧙🏻‍♂️

Stay tuned for Part 3!

Are you on Twitter? Let's connect! [@93alan](https://twitter.com/93alan)

I also have a [YouTube channel](https://bit.ly/alanmontgomerycoding) where I post coding tutorials, tips, tricks, reviews and more! I'd love to see you over there, I'd appreciate it:

%[https://bit.ly/alanmontgomerycoding]