Learn CSS Flexbox for free

A full course on CSS Flexbox.
    .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;
    }
Per Harald Borgen2:0210 months ago
    .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:0910 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;
    }