JUSTIFY-CONTENT & ALIGN-ITEMS at your first try 😊
Tags: css, flex, alignment, webdev
Published: 2019-08-27 23:25:28

`CSS Flex property` is a widely adopted and used property by front end developers nowadays. You almost cannot do without it. It's associate is the `CSS Grid Property` which is used most times alongside.
Personally, I use `flex` to the point that, if `flex` were to be human, I'd probably be cursed already, 😂
You could check out my blog - [dillionmegida.com](http://dillionmegida.com) for desktop & mobile view. Yes, it was all `flex`.
Although I do not use `grid` that much, or maybe, not yet.

Enough with your story already 😕

# justify-content & align-items
This article is written with the intention of ensuring effective use of the two properties in the title (particularly on the first try), therefore, prior knowledge of `CSS Flex` is required.
Read on [CSS Flex here](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
> `justify-content` and `align-items` can only be used when the display of an element is set to `flex`, `grid` or some other values.
> I'd be using the display of flex

Using these two properties can be confusing as it's difficult knowing when to use which one or the other. If you have attempted using flex before, you'd have come across this issue (as it seems to be). I hope to at the end of this article,  help you attain an efficient understanding of these (often used) properties of flex and also, help you get the exact use at your *first try*. Shall we? 🤓

💻 ...

Like I said, it requires the flex display value
```css
....
element {
    display: flex;
}
....
```

I want to believe that we currently understand `flex`.

```css
element {
    display: flex;
    justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
    align-items: flex-start|flex-end|center|stretch|baseline;
}
```

When an element's display is set as flex, the default direction is 'row'.
It could also be set to row manually.
```css
element {
    display: flex;
    flex-direction: row;
}
```
I'd refer to this as the `horizontal flow`.

When `justify-content` is used on a horizontal flow, it aligns the elements along the horizontal direction.

![Horizontal alignment preview](https://assets.wordpress.envato-static.com/uploads/2015/06/02-flex-justify-content-design-style.jpg)


When `align-items` is used on a horizontal flow, it aligns the elements along the vertical direction.

![Vertical alignment preview](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2014/10/align-items-illustration.jpg)

You could read more on associated flex property values (such as `flex-start`, `flex-end`).
- [CSS justify-content](https://www.w3schools.com/cssref/css3_pr_justify-content.asp)
- [CSS align-items](https://www.w3schools.com/cssref/css3_pr_align-items.asp)

 I do not want to deviate from the aim of this article so I won't be explaining the use of those terms.

> I want to ensure the adequate decision of when to use these properties.



Now, when an element's `flex direction` is set to `column`, the flow changes.

It possesses another flow which I would refer to as the `vertical flow`

When `justify-content` is used on a vertical flow, it aligns the elements the other way round - along the vertical direction. Therefore, all values set for it will only work in this direction.

When `align-items` is used on a vertical flow, it aligns the elements along the horizontal direction. Hence, all values set for it will only work in this direction.


The two properties just switched jobs as the direction was changed.


The flow terms I used (`vertical flow` and `horizontal flow`) were just silly names invented by me 🙈, there are official (or rather, professional) terms for that - Cross Axis and Main Axis

> The secret is simple.

> THE `justify-content` WORKS WITH THE FLOW AND `align-items` SIMPLY DOES THE OPPOSITE. 

> `flex-direction: row` - `HORIZONTAL flow` - `HORIZONTAL direction` for `justify-content` - `VERTICAL direction` for `align-items`

> `flex-direction: column` - `VERTICAL flow` - `VERTICAL direction` for `justify-content` - `HORIZONTAL direction` for `align-items`


That's it 🙂, I know right 😲, that simple.

I use flex almost all the time, in designing galleries, arranging elements and especially when I want to center any element in another element. `text-align: center` & `margin: auto` tend to center items only in some cases but with the power flex ☠️, I can center anything I want.
I simply do this;
```css
.parent-element {
    display: flex;
    justify-content: center;
    align-items: center;
}
```

With these simple settings, all elements under the `.parent-element` class will be centered vertically and horizontally.

I hope by now you can easily decide between - and how to effectively use - `justify-content` & `align-items` 😎

Helpful resource - [Aligning Items in a Flex Container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)

Thanks for reading.

Kindly share your reviews.