TheLazy.Dev
Portfolio GitHub

Blog

css |flexbox |ui |responsive

Flexbox use cases.

ziratsu

Ustariz Enzo

Posted on January 13, 2021

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.

space between nav
HTML :

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

        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

 
 

B. Centered navigation.

centered nav
HTML :

      <nav class="flex-nav nav-2">
        <ul>
          <li>Accueil</li>
          <li>Forum</li>
          <li>Blog</li>
        </ul>
      </nav>
Enter fullscreen mode Exit fullscreen mode

CSS :

.nav-1{
  display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

 
 

C. Left / Right navigation.

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>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

 
 
 

2. Responsive gallery

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>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

 
 
 

3. Center on X and Y

center on y and x

html :

    <div class="container-center">
      <div class="yellow-bloc"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
ziratsu
Ustariz Enzo

Posted on January 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Flexbox use cases.
css Flexbox use cases.

January 13, 2021