Untitled

/* Part One */
/* Flex - display, flex - direction flex-flow and justify-content  */

.container {
    margin-top: 50px;
    padding: 20px 0px;
    background-color: coral;
    display: flex;
    flex-direction: row;

    /* default - row */

    /* Main Axis --> Left to Right  */
    /* Cross Axis --> Top to Bottom  */

    /* flex-flow: row wrap; */
}

.containerI {
    margin-top: 50px;
    padding: 20px 0;
    background-color: coral;
    display: inline-flex;
    flex-direction: row;
}

.containerII {
    margin-top: 50px;
    padding: 20px 0px;
    background-color: coral;
    display: flex;
    flex-direction: row-reverse;
}

.containerIII {
    margin-top: 50px;
    padding: 20px 0px;
    background-color: coral;
    display: inline-flex;
    flex-direction: row-reverse;
    
}

.item {
    padding: 30px;
    margin: 10px;
    background-color: #06af8f;
    text-align: center;
    font-size: 30px;
    color: #fff;
}