Unit IV - Lesson 5

### 4.5.1. Introduction to flex

    (c) main axis

4.5.2. flex-direction

    /* Write your code below */
    .flex-item-1{
        background-color: red;
    }
    .flex-item-2{
        background-color: black;
    }
    .flex-item-3{
        background-color: blue;
    }
    .container{
        display: flex;
        flex-direction: column-reverse;

4.5.3. flex-wrap

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 2px dotted red;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }

4.5.4. flex-flow

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 2px dashed blue;
        flex-direction: column;
        display: flex;
        flex-wrap: wrap;
    }

4.5.5. justify-content

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        border: 3px solid blue;
        padding: 5px;
    }

4.5.6. align-items

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        display: flex;
        flex-direction: row-reverse;
        border: 3px solid red;
        align-items: center;
        padding: 5px;
    }

4.5.7. align-content

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 5px solid blue;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        align-content: space-around;
        padding: 5px;
    }

4.5.8. gap

    /* Write your code below */
    .container {
        width: 700px;
        height: 700px;
        border: 5px dotted red;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        row-gap: 5px;
        column-gap: 10px;
    }

4.5.9. order

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 3px solid red;
        display: flex;
        flex-wrap: wrap;
    }
    .flex-item-1{
        order: 2;
    }
    .flex-item-2{
        order: 3;
    }
    .flex-item-3{
        order: 1;
    }

4.5.10. flex-grow

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 2px dotted blue;
        display: flex;
        flex-wrap: wrap;
    }
    .flex-item-1{
        order: 3;
        flex-grow: 1;
    }
    .flex-item-2{
        order: 1;
        flex-grow: 2;
    }
    .flex-item-3{
        order: 2;
        flex-grow: 1;
    }

4.5.11. flex-shrink

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 2px dashed red;
        display: flex;
        flex-wrap: wrap;
    }
    .flex-item-1{
        order: 2;
        flex-shrink: 2;
    }
    .flex-item-2{
        order: 3;
        flex-shrink: 1;
        flex-grow: 1;
    }
    .flex-item-3{
        order: 1;
        flex-shrink: 1;
        flex-grow: 1;
    }

4.5.12. flex-basis

    /* Write your code below */
    .container{
        width: 500px;
        height: 500px;
        border: 1px solid red;
        display: flex;
    }
    .container div{
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 25px;
    }
    .container div:nth-of-type(2){
        flex-basis: 100px;
    }

4.5.13. flex

    /* Write your code below */
    .container {
        width:500px;
        height:500px;
        display:flex;
        flex-wrap:wrap;
        border: 3px dashed blue;
    }

    .flex-item-1 {
        flex: 3;
    }

    .flex-item-2 {
        flex: 3;
        flex: 3 2;
    }

    .flex-item-3 {
        flex: 3;
        flex: 3 2;
        flex-basis: 100px;
    }

4.5.14. align-self

    /* Write your code below */
    .container {
        width: 500px;
        height: 500px;
        border: 4px dashed red;
        display: flex;
        flex-direction: column;
    }

    .flex-item-3 {
        align-self: flex-end;
    }