flexbox

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Flex Box</title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Flex Box</h1>
    </header>
    <div class="wrapper">
        <div class="container">
            <h2>Flex Alignment</h2>
            <h3>Flex End</h3>
            <div class="gallery">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Flex Center</h3>
            <div class="gallery-2">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Flex Space Between</h3>
            <div class="gallery-3">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Flex Space Around</h3>
            <div class="gallery-4">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h2>Flex Ordering</h2>
            <h3>Specific Order</h3>
            <div class="gallery-5">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div class="foo"><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h2>Flex Direction</h2>
            <h3>Reverse Direction</h3>
            <div class="gallery-6">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Column Direction</h3>
            <div class="gallery-7">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Column Direction Center Align</h3>
            <div class="gallery-8">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h2>Flex Alignment</h2>
            <h3>Flex End Alignment</h3>
            <div class="gallery-9">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
            <h3>Flex Center Alignment</h3>
            <div class="gallery-10">
                <div><img src="images/de-vries-1.jpg" alt="detail"></div>
                <div><img src="images/de-vries-2.jpg" alt="detail"></div>
                <div><img src="images/de-vries-3.jpg" alt="detail"></div>
            </div>
        </div>
        <!-- .container-->
    </div>
    <!-- .wrapper-->
    <footer>
        <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
    </footer>
</body>

</html>

styles.css

body {
    background: #eeeeee;
    font-size: 16px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    margin: 0;
}

a {
    color: crimson;
    text-decoration: none;
}

a:hover {
    color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
    margin: 0 auto;
    width: 88%;
    max-width: 1080px;
}

.wrapper {
    padding: 1em 0;
    background: #ffffff;
}

img {
    max-width: 100%;
    height: auto;
}


/* Flex Box Gallery
------------------------------------------*/

.gallery,
.gallery-2,
.gallery-3,
.gallery-4,
.gallery-5,
.gallery-6,
.gallery-7,
.gallery-8,
.gallery-9,
.gallery-10 {
    background: pink;
    display: flex;
}

.gallery img,
.gallery-2 img,
.gallery-3 img,
.gallery-4 img,
.gallery-5 img,
.gallery-6 img,
.gallery-7 img,
.gallery-8 img,
.gallery-9 img,
.gallery-10 img {
    display: block;
}

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

.gallery-2 {
    justify-content: center;
    flex-wrap: wrap;
}

.gallery-3 {
    justify-content: space-between;
    flex-wrap: wrap;
}

.gallery-4 {
    justify-content: space-around;
    flex-wrap: wrap;
}

.gallery-5 .foo {
    order: 1;
    /* Use -1 to bring forward */
}

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

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

.gallery-8 {
    flex-direction: column;
    align-items: center;
}

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

.gallery-10 {
    align-items: center;
}