Flex Container

.flex-container {
  display: flex;
  background-color: orange;
  width:250px;
}

.flex-container > div {
  background-color: yellow;
  margin: 4px;
  padding: 5px 10px;
  font-size: 30px;
  color:black;
}

div class="flex-container"
  div 1 div
  div 2 div
  div 3 div
div

GO TO FLEX TAGS

1. display: flex;
2. flex-direction: column;
3. flex-direction: row;
4. flex-direction: column-reverse;
5. flex-direction: row-reverse;
6. flex-wrap: wrap;
7. flex-wrap: nowrap;
8. flex-wrap: wrap-reverse;
9. flex-flow: row wrap;
10. justify-content: center;
11. justify-content: flex-start;
12. justify-content: flex-end;
13. justify-content: space-around;
14. justify-content: space-between;
15. align-items: center;
16. align-items: flex-start;
17. align-items: flex-end;
18. align-items: stretch;
19. align-items: baseline;
20. align-content: space-between;
21. align-content: space-around;
22. align-content: stretch;
23. align-content: center;
24. align-content: flex-start;
25. align-content: flex-end;

Div Total Center

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: orange;
}

.flex-container > div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}

FLEX CONTENT
flex-direction: row; example 
flex-direction: row-reverse; example 
flex-direction: column; example 
flex-direction: column-reverse; example 

flex-wrap: wrap; example 
flex-wrap: nowrap; example 
flex-wrap: wrap-reverse; example 

flex-flow: row wrap; example 

justify-content: center; example 
justify-content: flex-start; example 
justify-content: flex-end; example 
justify-content: space-around; example 
justify-content: space-between; example 

align-items: center; example 
align-items: flex-start;  example 
align-items: flex-end;  example 
align-items: stretch;  example 
align-items: baseline;  example 

align-content: space-between;  example 
align-content: space-around;  example 
align-content: stretch;  example 
align-content: center;  example 

flex-wrap: wrap;  example 
align-content: flex-start;  example 

Total Center 
 display: flex;
justify-content: center;
align-items: center;  example  

hr{
border: 0;
height: 5px;
background-image: 
-webkit-gradient(linear, 
left top, right top, 
from(yellow), to(red));
border-radius: 5px;
}

GRADIANT HORIZONTAL LINE

---