flex-box

FLEXBOX Layout

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 child 1 child 1 child 1</p>
            <p>child 2a</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: box;
    margin: 10px 10px 40px;
    outline: 1px dashed black;

    overflow: hidden;
    text-overflow: ellipsis;}

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

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

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

/* align child elements to end */
.example-3 {     
    box-orient: horizontal;
    box-pack: end;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

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

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

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

JavaScript

// PREFIXFREE PLUGIN SO IT AUTOMATICALLY ADD PREFIXES FOR BROWSERS CSS
/**
 * StyleFix 1.0.3 & PrefixFree 1.0.7
 * @author Lea Verou
 * MIT license
 */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return...