flexbox.css

// BASIC
.container {
  display:flex;
  border:10px solid goldenrod;
  height:500px;
  flex-wrap: wrap;
}
.box {
  width: 33.333333%;
}

// CHANGE ORDER
.container {
  display: flex;
}
.box {
  flex: 1;
  /*All items are order space 1*/
  order: 1;
}
.box3{
  /*Order space 3 is AFTER the last item in order: 2*/
  order: 3
}
.box7{
  /*Order space -2 is BEFORE the first item in order: 1*/
  order: -2
}
.box5{
  /*Order space 7 is last since 7 > 3 of .box3*/
  order: 7
}

//ALIGNMENT
/*Space out horizontally*/
.container {
  display: flex;
  /*justify-content: center;*/
  justify-content: space-between;
  /*justify-content: space-around;*/
  border: 10px solid mistyrose;
}
/*Center vertically*/
.container {
  display: flex;
  flex-direction: column;
  /*justify-content: space-between;*/
  justify-content: center;
  /*justify-content: space-around;*/
  border: 10px solid mistyrose;
  min-height: 100vh;
}

/*Align-items, be aware of axisy*/
.container {
  display: flex;
  border: 10px solid mistyrose;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
.box5{
  height: 300px;
  font-size: 150px;
}

/*Align-content, be aware of axisy*/
.container {
  display: flex;
  border: 10px solid mistyrose;
  height: 100vh;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.box{
  width: 33.333%;
}

/*Align-self, when one box acts seperately*/
.container {
  display: flex;
  border: 10px solid mistyrose;
  height: 100vh;
  align-items: flex-start;
}
.box{
  width: 33.333%;
}
.box2{
  padding-bottom: 200px;
}
.box6{
  padding-bottom: 0px;
}

.box9{
  padding-bottom: 50px;
  align-self:flex-end;
}