Flexbox use cases.

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

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

1. Navigation

A. A space-between navigation.

HTML :

      <nav class="flex-nav nav-1">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

 
 

B. Centered navigation.

HTML :

      <nav class="flex-nav nav-2">
        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
  display: flex;
    justify-content: center;
    align-items: center;
}

 
 

C. Left / Right navigation.

HTML :

      <nav class="flex-nav nav-3">
        <img src="rocket.png" />

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>

CSS :

.nav-1{
    display: flex;
    justify-content: start;
    align-items: center;
}

 
 
 

2. Responsive gallery

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 :

.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    max-width: 1300px;
    margin: 70px auto 0;
}

 
 
 

3. Center on X and Y

html :

    <div class="container-center">
      <div class="yellow-bloc"></div>
    </div>

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.