DEV Community

loading...
Cover image for Flexbox use cases.

Flexbox use cases.

ziratsu profile image Ustariz Enzo ・3 min read

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 ? ⛰️

See you next time for some quick tutorials !

Enzo.

Discussion (0)

pic
Editor guide