Learn Flexbox for free

12 interactive screencasts to take you from beginner to advanced

    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      flex-direction: row;
    }
    .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 {
Per Harald Borgen3:093 months ago
    .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.

What people are saying about Scrimba: