Post

My CSS 3 Flex Box

13 Aug 2016Harianto van Insulinde

Front end

// Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 @screen-xs: 480px; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // Small screen / tablet //** Deprecated `@screen-sm` as of v3.0.1 @screen-sm: 768px; @screen-sm-min: @screen-sm; //** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // Medium screen / desktop //** Deprecated `@screen-md` as of v3.0.1 @screen-md: 992px; @screen-md-min: @screen-md; //** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // Large screen / wide desktop //** Deprecated `@screen-lg` as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; //** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); /* END init */ /* mixins */ .flex() { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .flex--column() { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex--row() { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex--align-center() { align-items: center; } .flex-flex(@flex: 1) { -webkit-box-flex: @flex; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: @flex; /* OLD - Firefox 19- */ -webkit-flex: @flex; /* Chrome */ -ms-flex: @flex; /* IE 10 */ flex: @flex; } .flex-content(@content) { -webkit-justify-content: @content; -ms-flex-pack: @content; justify-content: @content; } .text-overflow(@val: ellipsis) { text-overflow: @val; } .filter(@val: blur(5px)) { -webkit-filter: @val; -moz-filter: @val; -o-filter: @val; -ms-filter: @val; filter: @val; } .transition(@type:all, @duration:0.4s, @ease:ease-out) when not (@type = all) { -ms-transition: -ms- @type @duration @ease; -moz-transition: -moz- @type @duration @ease; -webkit-transition: -webkit- @type @duration @ease; transition: @type @duration @ease; } .transform(...) { -webkit-transform: @arguments; -moz-transform: @arguments; -ms-transform: @arguments; -o-transform: @arguments; transform: @arguments; } .gradient(...) { background: -webkit-linear-gradient(@arguments); /* For Safari 5.1 to 6.0 */ background: -moz-linear-gradient(@arguments); /* For Firefox 3.6 to 15 */ background: -o-linear-gradient(@arguments); /* For Opera 11.1 to 12.0 */ background: linear-gradient(@arguments); /* Standard syntax */ } /* END mixins */ /* util */ .u-box { .flex(); /* * Flex Direction: COLUMN - Where elements goes from TOP to BOTTOM */ &--column { .flex--column(); } /* * Flex Direction: ROW - Where elements goes from LEFT to RIGHT */ &--row { .flex--row(); } // flex-wrap on default `nowrap` where items is inline &--wrap { flex-wrap: wrap; } &--wrap-reverse { flex-wrap: wrap-reverse; } &--list { margin-right: -1rem; margin-bottom: -1rem; > * { margin-right: 1rem; margin-bottom: 1rem; &:empty { display: none; } } } /* * Justify content HORIZONTALLY - left/right/row */ &--justify { &-flex-start { justify-content: flex-start; } &-flex-end { justify-content: flex-end; } &-center { justify-content: center; } &-space-between { justify-content: space-between; } &-space-around { justify-content: space-around; } } &--inline { display: inline-flex; } /* * Align content VERTICALLY - up/down/column */ &--align { &-flex-start { align-items: flex-start; } &-flex-end { align-items: flex-end; } &-center { align-items: center; } &-stretch { align-items: stretch; } &-space-between { align-items: space-between; } &-space-around { align-items: space-around; } } &--align-center { -webkit-align-items: center; /* Safari 7.0+ */ align-items: center; } &--flex-end { -webkit-justify-content: flex-end; justify-content: flex-end; } &--queries { .flex--column(); } } .u-flex { .flex-flex(1); &--minWidth { flex-basis: 320px; } &--grow { flex-grow: 1; } &--shrink { flex-shrink: 0; } } .u-box-col--center { .flex-content(center); } .u-relative { position: relative; } .u-absolute { position: absolute; } .u-absolute-full { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; } .u-hidden { display: none; } .u-invisible { visibility: hidden; } .u-overflow { overflow: hidden; &-x { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0, 0, 0); -webkit-perspective: 1000; } &-y { overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0, 0, 0); -webkit-perspective: 1000; } } .u-text-overflow { white-space: nowrap; .text-overflow(); } .u-width { width: 100%; } .u-height { height: 100%; } .u-padding { padding: 1rem; &-2 { padding: 2rem; } &-x { padding-left: 1rem; padding-right: 1rem; &-2 { padding-left: 2rem; padding-right: 2rem; } } &-left { padding-left: 1rem; &-2 { padding-left: 2rem; } } &-right { padding-right: 1rem; &-2 { padding-right: 2rem; } } &-y { padding-top: 1rem; padding-bottom: 1rem; &-2 { padding-top: 2rem; padding-bottom: 2rem; } } &-top { padding-top: 1rem; &-2 { padding-top: 2rem; } } &-bottom { padding-bottom: 1rem; &-2 { padding-bottom: 2rem; } } &-px { padding: 1px; &-x { padding-left: 1px; padding-right: 1px; } &-left { padding-left: 1px; } &-right { padding-right: 1px; } &-y { padding-top: 1px; padding-bottom: 1px; } &-top { padding-top: 1px; } &-bottom { padding-bottom: 1px; } } } .u-margin { margin: 1rem; &-2 { margin: 2rem; } &-x { margin-left: 1rem; margin-right: 1rem; &-2 { margin-left: 2rem; margin-right: 2rem; } } &-left { margin-left: 1rem; &-2 { margin-left: 2rem; } } &-right { margin-right: 1rem; &-2 { margin-right: 2rem; } } &-y { margin-top: 1rem; margin-bottom: 1rem; &-2 { margin-top: 2rem; margin-bottom: 2rem; } } &-top { margin-top: 1rem; &-2 { margin-top: 2rem; } } &-bottom { margin-bottom: 1rem; &-2 { margin-bottom: 2rem; } &--editModel { margin-bottom: 0.4rem; } } &-px { margin: 1px; &-x { margin-left: 1px; margin-right: 1px; } &-left { margin-left: 1px; } &-right { margin-right: 1px; } &-y { margin-top: 1px; margin-bottom: 1px; } &-top { margin-top: 1px; } &-bottom { margin-bottom: 1px; } } } .u-border { border: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border: 2rem solid rgba(0, 0, 0, 0.05); } &-x { border-left: 1rem solid rgba(0, 0, 0, 0.05); border-right: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-left: 2rem solid rgba(0, 0, 0, 0.05); border-right: 2rem solid rgba(0, 0, 0, 0.05); } } &-left { border-left: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-left: 2rem solid rgba(0, 0, 0, 0.05); } } &-right { border-right: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-right: 2rem solid rgba(0, 0, 0, 0.05); } } &-y { border-top: 1rem solid rgba(0, 0, 0, 0.05); border-bottom: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-top: 2rem solid rgba(0, 0, 0, 0.05); border-bottom: 2rem solid rgba(0, 0, 0, 0.05); } } &-top { border-top: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-top: 2rem solid rgba(0, 0, 0, 0.05); } } &-bottom { border-bottom: 1rem solid rgba(0, 0, 0, 0.05); &-2 { border-bottom: 2rem solid rgba(0, 0, 0, 0.05); } } &-px { border: 1px solid rgba(0, 0, 0, 0.05); &-x { border-left: 1px solid rgba(0, 0, 0, 0.05); border-right: 1px solid rgba(0, 0, 0, 0.05); } &-left { border-left: 1px solid rgba(0, 0, 0, 0.05); } &-right { border-right: 1px solid rgba(0, 0, 0, 0.05); } &-y { border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } &-top { border-top: 1px solid rgba(0, 0, 0, 0.05); } &-bottom { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } } } .u-min { &-square { min-height: 320px; min-width: 320px; } &-height { min-height: 320px; } &-width { min-width: 320px; } } .u-max { &-height { height: 100%; } &-width { width: 100%; } } .u-noselecttext { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .u-inline { display: inline; &-block { display: inline-block; } } .u-input { &--clean { border: 0; background-color: transparent; } } .u-font-code { font-family: 'Lucida Console', Monaco, monospace; } .u-label--title { position: relative; border-left: 1px dashed darken(#fff, 40%); border-bottom: 1px dashed darken(#fff, 40%); padding-left: 1rem; padding-right: 1rem; padding-top: 3px; padding-bottom: 1px; margin-bottom: 26px; &::after { position: absolute; top: 100%; left: 1.1rem; display: block; font-size: 8px; line-height: 8px; content: attr(title) ' '; color: darken(#fff, 30%); padding-top: 4px; } input, textarea { color: darken(#f00, 10%); font-family: 'Rokkitt', serif; font-size: 3rem; &:focus { outline: 0; color: black; font-style: italic; } } textarea { flex-grow: 1; } } .u-label--title-chat { position: relative; border-left: 1px dashed darken(#fff, 40%); border-bottom: 1px dashed darken(#fff, 40%); border-radius: 10px; padding-left: 1rem; padding-right: 1rem; padding-top: 3px; padding-bottom: 1px; margin-bottom: 26px; background-color: aliceblue; box-shadow: 3px -3px 2px darken(aliceblue, 40%); &::after { position: absolute; top: 100%; left: 1.1rem; display: block; font-size: 8px; line-height: 8px; content: attr(title) ' '; color: darken(#f00, 30%); padding-top: 4px; } .chat-message { white-space: pre-wrap; font-family: 'Rokkitt', serif; color: darken(aliceblue, 30%); } } .u-label--help { display: inline-block; color: darken(#fff, 50%); &:not(.is-expanded) { .u-label--description { display: none; } } &.is-expanded { .u-label--description { display: block; } } } .u-label--button { cursor: help; } .u-label--description { font-size: 10px; color: darken(#fff, 60%); } .u-grid { &__row { display: flex; flex-direction: column; } &__item { flex: 1; } } .u-pointer { cursor: pointer; } .u-max { max-width: 100%; max-height: 100%; } @media all and (min-width: 480px) { .u-grid__row--sm { flex-direction: row; } } @media all and (min-width: 720px) { .u-grid__row--md { flex-direction: row; } } @media all and (min-width: 960px) { .u-grid__row--lg { flex-direction: row; } } /* END util */ /* base */ html { font-family: Oswald, Helvetica, Arial, sans-serif; font-size: 62.5%; // reset makes 1.0rem equals to 10px; } body { line-height: 1.72222; font-size: 1.6rem; } /* END base */ .u-list { list-style: none; margin: 0; padding: 0; &--isEmpty { &:empty { color: grey; height: inherit; &:before { display: block; content: 'Empty list'; height: 100%; padding: 1rem; } } } &-item { display: inline-block; } } /* CONTENT */ .sylo { min-height: 100vh; margin: 0; &-header, &-footer { padding: 0.1rem 1rem; background-color: #646065; color: white; min-height: 50px; } &, &-body { .flex(); .flex--column(); } &-content { color: #766561; background-color: #cbcbcb; } &-nav { order: -1; color: #ede8e1; background-color: #d2c4be; } &-ads { color: #ede8e1; background-color: #d2c4be; } .container { max-width: 767px; padding-left: 1rem; padding-right: 1rem; margin: 0 auto; } } @media (max-width: 767px) { .sylo { &-body { .flex-flex(1); } &-content { .flex-flex(1); } } } @media (min-width: 768px) { .sylo { &-body { .flex--row(); .flex-flex(1); } &-content { .flex-flex(1); } &-nav, &-ads { /* 12em is the width of the columns */ .flex-flex(0 0 12em); } } } .example-container { position: relative; min-height: 400px; color: #766561; }

Own brewed less stylesheet with the use of flex-box .u-box class. My css class explanations.

The use of .u-box and .u-flex to create a structure.

Flex Box

html

<style rel="stylesheet/less" type="text/less">
    /**
     ** mixins 
     **/

    .flex() {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex--column() {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
          -ms-flex-direction: column;
            flex-direction: column;
    }

    .flex--row() {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
          -ms-flex-direction: row;
            flex-direction: row;
    }

    .flex--align-center() {
        align-items: center;
    }

    .flex-flex(@flex: 1) {
        -webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: @flex;         /* OLD - Firefox 19- */
        -webkit-flex: @flex;          /* Chrome */
        -ms-flex: @flex;              /* IE 10 */
        flex: @flex;    
    }

    .flex-content(@content) {
        -webkit-justify-content: @content;
        -ms-flex-pack: @content;
        justify-content: @content;
    }

    /* END mixins */




    /** 
     ** utils 
     **/ 

    .u-box {
        .flex();
        
        /*
         * Flex Direction: COLUMN - Where elements goes from TOP to BOTTOM
         */
        &--column {
            .flex--column();
        }

        /*
         * Flex Direction: ROW - Where elements goes from LEFT to RIGHT
         */
        &--row {
            .flex--row();
        }

        // flex-wrap on default `nowrap` where items is inline
        &--wrap {
            flex-wrap: wrap;
        }
        &--wrap-reverse {
            flex-wrap: wrap-reverse;
        }

        &--list {
            margin-right: -1rem;
            margin-bottom: -1rem;

            > * {
                margin-right: 1rem;
                margin-bottom: 1rem;

                &:empty {
                    display: none;
                }
            }
        }

        /* 
         * Justify content HORIZONTALLY - left/right/row
         */
        &--justify {
            &-flex-start {
                justify-content: flex-start;
            }
            &-flex-end {
                justify-content: flex-end;
            }
            &-center {
                justify-content: center;
            }
            &-space-between {
                justify-content: space-between;
            }
            &-space-around {
                justify-content: space-around;
            }
        }

        &--inline {
            display: inline-flex;
        }

        /* 
         *  Align content VERTICALLY - up/down/column 
         */
        
        &--align {
            &-flex-start {
                align-items: flex-start;
            }
            &-flex-end {
                align-items: flex-end;
            }
            &-center {
                align-items: center;
            }
            &-stretch {
                align-items: stretch;
            }
            &-space-between {
                align-items: space-between;
            }
            &-space-around {
                align-items: space-around;
            }
        }


        &--align-center {
            -webkit-align-items: center; /* Safari 7.0+ */
            align-items: center;
        }

        &--flex-end {
            -webkit-justify-content: flex-end;
            justify-content: flex-end;
        }

        &--queries {
            .flex--column();
        }
    }


    .u-flex {
        .flex-flex(1);

        &--minWidth {
            flex-basis: 320px;
        }

        &--grow {
            flex-grow: 1;
        }

        &--shrink {
            flex-shrink: 0;
        }
    }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>

Make sure css have this

css

body {
  margin: 0;
  min-height: 100vh;
}

if browser don't support 100vh. Use Chrome. No really I don't make outdated browser hacks for MSIE anymore.

Initiate platform

Ground zero, just an empty placeholder. Nothing special. Your workspace.

Main box

Make parent (<body/>) element with .u-box so the rest will fill to the bottom

Main box .u-flex

Give the main box a .u-flex class, so it fills to the right

Building elements

Main box in place

Let’s make a <header/><main/><footer/>.

header

main content here

footer

Ideally we want to have <footer/> on the bottom of the page. We can do it with position: fixed or position: absolute, but there’s no need. To do that we want to fill the main content not with elements but with .u-flex

header

main content here with .u-flex

footer

As you can see it doesn't fill up. Means we need to put .u-box on it's parent.

header

main content here with .u-flex

footer

Since display: flex default direction is a row we need to modify the direction as column: flex-direction: column.
Now let’s put extra modifier next to .u-box to .u-box.u-box--column.

header

main content here with .u-flex

footer

.u-box--column is added after u-box.

Main element with text

header

footer

Usually this structure is enough to start with

Now we can put the normal <div/> in it and add some text.

header

Blog fap chia banjo, sriracha beard wolf chambray waistcoat leggings food truck aesthetic narwhal taxidermy. Intelligentsia sustainable fixie, occupy locavore kinfolk aesthetic scenester fingerstache. Pour-over keffiyeh PBR&B tousled, hashtag DIY single-origin coffee lumbersexual godard tote bag post-ironic YOLO. Blog letterpress deep v tilde chicharrones. Echo park taxidermy hella, pug hammock scenester intelligentsia 8-bit drinking vinegar portland godard tofu jean shorts +1 chambray. Portland stumptown PBR&B, flexitarian gastropub schlitz forage tote bag. Waistcoat dreamcatcher shoreditch, art party echo park leggings kombucha everyday carry post-ironic salvia intelligentsia pitchfork slow-carb blue bottle ethical.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

Asymmetrical hashtag tilde whatever, selfies beard squid kitsch mixtape tofu plaid. Marfa selfies williamsburg, green juice dreamcatcher poutine farm-to-table seitan pabst chillwave selvage ugh blog VHS 8-bit. Humblebrag offal selfies, four loko pickled irony tilde. Forage intelligentsia chia kombucha, ugh typewriter ramps pickled 3 wolf moon irony pour-over neutra DIY messenger bag. Direct trade lo-fi iPhone plaid polaroid, blog affogato offal sartorial seitan hoodie. Semiotics cold-pressed photo booth green juice, ethical mixtape authentic +1 scenester. Fashion axe hoodie deep v, chicharrones poutine gastropub disrupt etsy mumblecore kitsch williamsburg literally gluten-free man bun.

footer

I put extra child element <div class="main-content" /> inside <main/>

header

footer

I gave <div class="main-content" /> with some style: max-width: 320px; margin: 0 auto

Main element with Flex Box child elements

header

footer

Basic structure

Let’s put <div class="main-content" /> in a wrapper called <main/>.

header

footer

It would be nice to have a navigational sidebar

header

Main
Profile
About
Contact

footer

Made a <nav/> sibling of <main/>

default

 - <body/>
   - <header/>
   - <main/>
     - <main/>
     - <nav/>
   - <footer/>

Let’s give the parent of those siblings a .u-box. Remember display: flex default direction is row.

header

Main
Profile
About
Contact

footer

Put .u-box in the parent element of these siblings <main/><nav/> which is <main />

Of course we want to fill the remaining space. Let's do that with .u-flex.

header

Main
Profile
About
Contact

footer

To fill the space with: .u-flex. Just like <main class="u-flex"/><nav/>.

For SEO stuff we keep in mind that <main/> element should be first before <nav/> sidebar in this markup.
We can change the order how we put our siblings. So we switch <nav/> element order just with styling order: -1;

header

Main
Profile
About
Contact

footer

<nav/> with Flex Box styling order: -1 to change.

Optionally you can add extra sibling for another sidebar <aside/> for example ads content.

header

Main
Profile
About
Contact

Ads

footer

Final styling

We’re going to give sidebars width 120px, not like: width: 120px but with flex-grow: 0; flex-shrink: 0; flex-basis: 120px. That’s shorthand for flex: 0 0 120px;
Therefore I made a LESS function for multi browser goals: .flex-flex(@flex: 1);

This is very useful if you want to change flex directions from Row to Column.

less

  .flex-flex(@flex: 1) {
    -webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: @flex;         /* OLD - Firefox 19- */
    -webkit-flex: @flex;          /* Chrome */
    -ms-flex: @flex;              /* IE 10 */
    flex: @flex;    
  }

  .sidebar {
    .flex-flex(0 0 120px)
  }

.flex-flex(@flex: 1) { -webkit-box-flex: @flex; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: @flex; /* OLD - Firefox 19- */ -webkit-flex: @flex; /* Chrome */ -ms-flex: @flex; /* IE 10 */ flex: @flex; } .sidebar { .flex-flex(0 0 120px) } .nav-sidebar { li { margin: 0; padding: 0 0.4rem; background-color: darken(#5c9ea0, 10%); } } .ads { background-color: darken(#5c9ea0, 10%); height: 100px; margin-bottom: 1rem; }

header

Main
Profile
About
Contact

Ads

footer

Media Queries

Remember that we have that three siblings <main/><nav/><aside/> that has a parent <main/> that uses .u-box. We can add extra modifier, for example: .u-box.u-box--queries. So you can use @media() {} to change flex-box direction to column.

less

.flex--row() {
      -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex--column() {
      -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.u-box.u-box--queries {
  .flex--column();
}

@media (min-width: 768px) {
  .u-box.u-box--queries {
    .flex--row();
  }
  .sidebar {
    .flex-flex(0 0 120px)
  }
}

Make sure you move .sidebar class inside that media query.

On a mobile version should look like this

.flex--row() { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex--column() { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .u-box.u-box--queries { .flex--column(); } @media (min-width: 768px) { ._sidebar { .flex-flex(0 0 120px) } } //@media (min-width: 768px) { // .u-box.u-box--queries { // .flex--row(); // } //}

header

Main
Profile
About
Contact

Ads

footer

When the screen reach above particular width, this case min-width: 768px:

header

Main
Profile
About
Contact

Ads

footer

jade

html
  body.u-flex.u-box.u-box--column
    header(style='background-color: #646065; color: navajowhite') header
    main.u-flex.u-box.u-box--queries(style='background-color: navajowhite;')
      main.u-flex(style='background-color: gold')
        .main-content(style='max-width: 320px; margin: 0 auto')
          p
            | Blog fap chia banjo, sriracha beard wolf chambray waistcoat leggings food truck aesthetic narwhal taxidermy. Intelligentsia sustainable fixie, occupy locavore kinfolk aesthetic scenester fingerstache. Pour-over keffiyeh PBR&B tousled, hashtag
            | DIY single-origin coffee lumbersexual godard tote bag post-ironic YOLO. Blog letterpress deep v tilde chicharrones. Echo park taxidermy hella, pug hammock scenester intelligentsia 8-bit drinking vinegar portland godard tofu jean shorts +1 chambray.
            | Portland stumptown PBR&B, flexitarian gastropub schlitz forage tote bag. Waistcoat dreamcatcher shoreditch, art party echo park leggings kombucha everyday carry post-ironic salvia intelligentsia pitchfork slow-carb blue bottle ethical.
      nav.sidebar(style='order: -1; background-color: cadetblue; color: aliceblue')
        ul.nav-sidebar.u-list
          li Main
          li Profile
          li About
          li Contact
      aside.sidebar(style='background-color: cadetblue; color: aliceblue')
        .ads Ads
        .ads Ads
        .ads Ads
    footer(style='background-color: #646065; color: navajowhite') footer

Still hating Jade script. I just use the converter