CSS Flexbox

by TrickyUI

HTML

<!-- flex container -->
    <div class="container">
        <!-- flex items -->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <!--///// flex-direction /////-->

    <!-- flex-direction: row -->
    <div class="container flex-row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <!-- flex-direction: row-reverse -->
    <div class="container flex-row-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <!-- flex-direction: column -->
    <div class="container flex-column">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <!-- flex-direction: column-reverse -->
    <div class="container flex-column-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <!--///// flex-wrap /////-->

    <!-- flex-wrap: nowrap -->
    <div class="container flex-nowrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
    </div>

    <!--...

CSS

/* common style */
    div {
        border: 2px solid black;
        border-radius: 4px;
        padding: 10px;
    }

    .h-100 {
        height: 100px;
    }

    .h-200 {
        height: 200px;
    }

    .h-300 {
        height: 300px;
    }

    .w-50 {
        width: 50px;
    }

    .w-100 {
        width: 100px;
    }

    .w-150 {
        width: 150px;
    }

    /* container */
    .container {
        display: flex;
        background: #6fa8dd;
        width: 500px;
        margin-bottom: 10px;
    }


    /* items */
    .item {
        background: #fed966;
        padding: 10px;
        font-size: 18px;
        color: #000000;
    }

    /* flex-direction: row | row-reverse | column | column-reverse */
    .flex-row {
        flex-direction: row;
    }

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-column-reverse {
        flex-direction: column-reverse;
    }

    /* flex-wrap: nowrap | wrap | wrap-reverse */
    .flex-nowrap {
        flex-wrap: nowrap;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-wrap-reverse {
        flex-wrap: wrap-reverse;
    }

    /* justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly */
    .justify-content-start {
        justify-content: flex-start;
    }

    .justify-content-end {
        justify-content: flex-end;
    }

    .justify-content-center {
        justify-content: center;
    }

    .justify-content-space-between {
        justify-content: space-between;
    }

    .justify-content-space-around {
        justify-content: space-around;
    }

    .justify-content-space-evenly {
        justify-content: space-evenly;
    }

    /* align-items: flex-start | flex-end | center | stretch | baseline */
    .align-items-start {
        align-items: flex-start;
    }

    .align-items-end {
        align-items: flex-end;
    }

    .align-items-center {
       ...