## 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

1
2
3

##
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