flex box
Published: 2021-12-29 19:08:13

{% codepen https://codepen.io/moonlxght10/pen/NWaygRZ %}

{% codepen https://codepen.io/moonlxght10/pen/NWaygbZ %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzt5skom7egmez781acp.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbwnd2niiauonpfp92wc.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: column-reverse;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckfpwmlg83he95bj4x1b.png
)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: row;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06w53grncb8k8r1k2ght.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: row-reverse;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjss3ffili7f4dw2rc7g.png
)

`main axis cross axis`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7emaczh0x74mpcbijvtu.png)

`❗️justify-content along the main axis`
`❗️align-items along the cross axis`

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3l5i236xfk0wq0u8k7t.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: flex-end;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqcrqe3kq1dm7qkc4gqb.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center; 
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebuzye0bkcz4zamnn3v1.png)

`justify-content: space-evenly;` 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgfn5jx19xlsxhme22mv.png)

`justify-content: space-between;` 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kso86ri09f9wgep8hpg9.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center;
    /* row->cross -> use align-items */
    align-items:flex-end;
    height: 90vh; 
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00tuthbbvkrw46ajdy9y.png)

```css
.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center;
    /* row->cross -> use align-items */
    align-items:center;
    height: 90vh; 
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k73bzu7f3npsr7et7c3.png
)

`what happen if we changed height: vh? ` 
`height: 90vh;`
{% codepen https://codepen.io/moonlxght10/pen/wvryeEw %}

`height: 140vh;` -> `we should scroll the page`
{% codepen https://codepen.io/moonlxght10/pen/zYERzJE %}

## align-content
{% codepen https://codepen.io/moonlxght10/pen/zYERamG %}

so if we add one more box we will see the box will be smaller! 
{% codepen https://codepen.io/moonlxght10/pen/ExwQROV %}
  
so we should use `flex-wrap: wrap;`
{% codepen https://codepen.io/moonlxght10/pen/zYERaev %}

but for beautifully that we use `align-content` 
{% codepen https://codepen.io/moonlxght10/pen/xxXYzeE %}

## now I want to change -for example- box A position 
{% codepen https://codepen.io/moonlxght10/pen/gOGvjYK %}