How justify-content and align-items properties work.
Tags: css
Published: 2020-12-09 13:05:40

Yes CSS can be tricky sometimes and with the emergence *flex-box* and *grid*, it infact has become more trickier writing advanced CSS codes. I want to quickly work you through how the `justify-content` and `align-items` properties work in flex-box; when to use them and the output you should expect to get from them.

Now lets write a couple of div tags in our html and then use CSS flex-box on them so as to understand how `justify-content` and `align-items` properties work.

```
<div classname="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
```
Now we shall be using the CSS flex-box properties on these *divs* and also we would be giving them some colours so that they can be visible.

```
.container{
  display: flex;
}
.container > div{
  background: red;
  width: 30px;
  margin-left: .8rem;
}
```
With these properties, our container div is going to display flex and since the CSS default *flex-direction* is *row*, when we add the *justify-content* property, the justification will happen along the horizontal axis while the *align-items* will happen along the vertical axis. 

Now let's add these two properties and see their effects.
```
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container > div{
  background: red;
  width: 30px;
  margin-left: .8rem;
}
```
Since the default CSS flex direction is row, the *justify-content: center* property moved the container to the center on the horizontal plane while the *align-items: center* property moved it to the center on the vertical plane.

Ahah! I can hear you ask "how will it look like if I set flex-direction to column?" 
Now let's do that but with only the justify-content property and see for yourself what happens

```
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container > div{
  background: red;
  width: 30px;
  margin-left: .8rem;
}
```
Since column favours the vertical plane, when you set the the `flex-direction: column`, the `justify-content: center` property centers the container element along the vertical plane (no longer the horizontal plane as it was when the flex-direction was set to row). Then, the `align-items: center` property will center the container element on the horizontal plane (as against the vertical plane when it the flex-direction was set to row).

###Rule of thumb

* the `flex-direction` property will determine what plane the `justify-content` and `align-items` properties will take effect. If set to column then the `justify-content` property will effect on the vertical plane while the `align-items` property will effect on the horizontal plane but if set to row then reverse is the case for the `justify-content` and `align-items` properties.

* Flexbox should be used on the parent element alone. So also `justify-content` and `align-items` properties.

* `justify-self` and `align-items` properties should be used for the child of the parent element, if need be.

[Read more on CSS flexbox](https://www.w3schools.com/css/css3_flexbox.asp)
C:\Program Files\Android\Android Studio