CSS Flexbox course - drafts

Playlist for the upcoming course
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      justify-content: space-evenly;
    }
    
    /* flex-start flex-end center space-around
    space-between space-evenly */
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      justify-content: flex-end;
    }
    
    .container > div:nth-child(1) {
      margin-right: auto;
    }
    
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .container > div {
      flex: 1;
    }
    
    .container > div:nth-child(2) {
      flex: 2;
    }
    
    .container > div:nth-child(4) {
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      height: 300px;
      align-items: center;
    }
    
    .container > div:nth-child(3) {
      align-self: flex-start;
    }
    
    
    .container > div:nth-child(1) {
      align-self: flex-end;
    .container {
      height: 300px;
      border: 5px solid #ffcc5c;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
    }
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
      flex-wrap: wrap;
    }
    
    .container > div {
      width: 300px;
    }
Per Harald Borgen1:3810 months ago
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .container > div {
    /*  flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;*/
    }
    
    .home {
      flex: 1 1 200px;
      /*
    .container {
      border: 5px solid #ffcc5c;
      display: flex;
    }
    
    .item1 {
      order: 1;
    }
    
    .item2 {
      order: 0;
    }
    
    .item3 {
Per Harald Borgen2:4810 months ago