Flex Grid

by mtambulut

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Flex Box</title>
    </head>
    <body>
        <div class="example-1">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-2">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-3">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-4">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-5">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-6">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-7">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
        <div class="example-8">
            <p>child 1</p>
            <p>child 2</p>
            <p>child 3</p>
        </div>
    </body>
</html>

CSS

[class^=example-] {
    display: -webkit-box;
    margin: 10px 10px 40px;
    outline: 1px dashed black;}

[class^=example-] p {
    margin: 10px;
    outline: 1px dashed red;}

/* align child elements to start */
.example-1 {     
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;}

/* align child elements center */
.example-2 {     
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;}

/* align child elements to end */
.example-3 {     
    -webkit-box-orient: horizontal;
    -webkit-box-pack: end;}

/* distribute fixed width elements evenly */
.example-4 {     
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;}

/* distribute fixed width elements evently, reversed */
.example-5 {
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;
    -webkit-box-direction: reverse;
    }

/* distribute elements evenly used -flex-box */
.example-6 p {
    margin: 10px;
    -webkit-box-flex: 1;
    }

/* only flex last element to fill remaining container */
.example-7 p:last-child {
    -webkit-box-flex: 1;
    }

/* flexing with ratios - the golden ratio */
.example-8 p:nth-child(1) {
    margin-right: 5px;
    -webkit-box-flex: 1;
    }
.example-8 p:nth-child(2) {
    margin-left: 5px;
    -webkit-box-flex: 1.618;
    }
.example-8 p:nth-child(3) {
    display: none;
    }