CSS: 4 Steps to Flex

There are 4 simple steps to use Flex.

1. Make your current container as ‘flex’: display

div {  display: flex; }

2. Choose the main-axis: flex-direction

div {  
 display: flex;  
 /* two choices: row or column, and each one has reverse. */
 flex-direction: column; 
}

3. Choose the alignment along the main-axis: justify-content

div {   
  display: flex;  
  flex-direction: column;   
  justify-content: center; 
}

4. Choose the alignment along the cross-axis (opposite of main-axis): align-items

div {   
  display: flex;  
  flex-drection: column;  
  justify-content: center;   
  align-items: center; 
}

… and if your div has height: 100vh, whatever contents/items in the div will be arrange right at the middle of your view-port.