Learn Flexbox for free

This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You'll learn all the key concept in addition to building a responsive navbar and a neat image grid.

    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      flex-direction: row;
    }
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      justify-content: space-around;
    }
    
    /* flex-start flex-end center space-around
    space-between space-evenly */
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      justify-content: flex-end;
    }
    
    .home {
      margin-right: auto;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .home {
      flex: 1;
    }
    
    .logout {
      flex: 1;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      height: 100%;
      align-items: center;
    }
    
    .logout {
      align-self: flex-start;
    }
    
    .home {
      align-self: flex-end;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 100%;
      align-items: flex-end;
    }
    
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      flex-wrap: wrap;
    }
    
    .container > div {
      width: 300px;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .home {
      flex: 1 1 200px;
    }
    
    .logout {
      flex: 10 1 200px;
    }
    
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .item1 {
      order: 1;
    }
    
    .item2 {
      order: 0;
    }
    
    .item3 {
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .search {
      flex: 1;
    }
    
    @media all and (max-width: 600px) {
      .container {
        flex-wrap: wrap;
      }
      .container > li {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .container > div > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .container > .normal {
        flex: 1 1 150px;
    }

Flexbox is a must-have skill for front-end developers.

Once you've learned Flexbox, you'll wonder how you ever managed to build websites without it. It gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexbile and responsive these days, Flexbox is a must-have skill for web developers.

Course content

This course is focused on getting you up to speed as quickly as possible. Even if you only watch the first lectures, you'll be able to take advantage of your new skills in your next project. I'll give you several exercises throughout the course, so that you'll be able to get your hands dirty as well.

We'll use a navbar as an example layout, as that's a very typical use case for Flexbox. In the bonus screencasts we'll tie everything together and build two real-world examples: an awesome image grid and a fully responsive navbar.

You can follow the course creator Per Harald Borgen on Twitter here.

people love this course 😍

why you'll learn faster 🔥

Hi, I'm your teacher 👋

The course creator

Per Harald Borgen

Front-end developer and co-founder of Scrimba. Per loves helping other people learn new skills so that they can improve their lives. He makes his tutorials as simple as humanly possible, and focus on getting the students to the point where they can start building projects on their own.

Thank Per for the course

secure your free spot

100,000 people can't be wrong