Flexbox use cases.
Tags: css, flexbox, ui, responsive
Published: 2021-01-13 13:29:05

Let's see how and when we can handle those **lovely boxes.**

If you prefer to watch the video **version** it's right here : 

{%youtube oSlN0crJ4h4%}


##1. Navigation


###A. A space-between navigation.

![space between nav](https://dev-to-uploads.s3.amazonaws.com/i/cx4uiv0t32l4sdp9ppx3.png)
**HTML :**
```html 
      <nav class="flex-nav nav-1">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>
```
**CSS :** 
```CSS
.nav-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
```


&nbsp;
&nbsp;
###B. Centered navigation.

![centered nav](https://dev-to-uploads.s3.amazonaws.com/i/sz4h9omzw03v2sca807p.png)
**HTML :**
```html 
      <nav class="flex-nav nav-2">
        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>
```
**CSS :** 
```CSS
.nav-1{
  display: flex;
    justify-content: center;
    align-items: center;
}
```


&nbsp;
&nbsp;
###C. Left / Right navigation.

![left right navigation](https://dev-to-uploads.s3.amazonaws.com/i/8dml6fn5xmsh9cly4ckn.png)
**HTML :**
```html 
      <nav class="flex-nav nav-3">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>
```
**CSS :** 
```CSS
.nav-1{
    display: flex;
    justify-content: start;
    align-items: center;
}
```

&nbsp;
&nbsp;
&nbsp;
##2. Responsive gallery

![responsive gallery](https://dev-to-uploads.s3.amazonaws.com/i/2aln2h28key66tpkdivb.png)
**HTML :**
```html
    <div class="gallery">

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>
        <div class="item"><img src="https://images.unsplash.com/photo-1590244930261-c2a2e4a70b2b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=500">
        </div>

    </div>
```
**CSS :**
```css
.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    max-width: 1300px;
    margin: 70px auto 0;
}

```

&nbsp;
&nbsp;
&nbsp;
##3. Center on X and Y
![center on y and x](https://dev-to-uploads.s3.amazonaws.com/i/1x54uraqsjubwbb55zzq.png)

**html :**
```html 
    <div class="container-center">
      <div class="yellow-bloc"></div>
    </div>

```

**CSS :**
```css
.container-center  {
    width: 300px;
    height: 300px;
    background: rgb(49, 156, 206);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.yellow-bloc{
    width: 50px;
    height: 50px;
    background: yellow;
}
```


All right, if you want to see all the use cases, you can jump on the YouTube video (at the beginning of the article). !

**Source code** :
https://github.com/Ziratsu/Flexbox-use-cases

Come and take a look at my brand new **Youtube channel** :
https://www.youtube.com/channel/UCiukrDWz1wqlHAvIdqgqmQg
Be one of the first pioneers who follow me uh ? ⛰️

YT : https://www.youtube.com/c/TheWebSchool

*See you next time for some quick tutorials !*

Enzo.