SN FlexBox Layout

In this example below you will see how to do a SN FlexBox Layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by peterkc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright peterkc ©
  • HTML
  • CSS
  • JavaScript
    <h1>Modular Flexbox</h1>
<p>
	Group of vanilla SCSS class and mixins with no configuration and as close as possible to the original CSS syntax.
</p>

<p>
	The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The
	prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
</p>

<p><a href="https://codepen.io/peterkc/pen/GZQeyq" target="_blank">CodePen</a></p>

<div class="demo-container">

	<!--//======================================================== -->
	<h1>Flex (Minimal)</h1>  
	<pre class="line-numbers language-scss">
  <code class="language-scss">
// containers
.flex-column, .flex-row

// container - helper
.flex-even

// items
.flex-grow, .flex-shrink
  </code>
</pre> 
  
	<!--//======================================================== -->
	<h1>Flex (Advance)</h1>    
	<pre class="line-numbers language-scss">
  <code class="language-scss">
// container (nowrap, wrap)
.nowrap, .wrap

// container (justify-content)
.justify-start, .justify-end, .justify-center, .justify-around, .justify-between   

// container (align-items)
.items-start, .items-end 
.items-center, .items-baseline, .items-stretch

// container (align-content)
.align-start, .align-end, .align-center, .align-around, .align-between 
  </code>
</pre>   
  
	<!--//======================================================== -->  
  
	<h1>Example - Simple 1</h1>
	<div data-demo-id="S01" class="flex-column">
    <header>H</header>
    <section>A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S01" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<!--//======================================================== -->  
  
	<h1>Example - Simple 2</h1>
	<div data-demo-id="S02" class="flex-row items-stretch">
    <header>H</header>
    <section>A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S02" class="line-numbers language-markup"><code class="language-markup"></code></pre>  
  
	<!--//======================================================== -->
	<h1>Example - Simple 3</h1>
	<div data-demo-id="S03" class="flex-column">
    <header>H</header>
    <section class="flex-grow">A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S03" class="line-numbers language-markup"><code class="language-markup"></code></pre>  
  
 	<!--//======================================================== -->
	<h1>Example - Simple 4</h1>
	<div data-demo-id="S04" class="flex-column">
    <header>
      <div>H</div>
      <nav>N</nav>
    </header>
    <section class="flex-grow">A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S04" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<!--//======================================================== -->
	<h1>Example - Simple 5</h1>
	<div data-demo-id="S05" class="flex-column">
    <header>H</header>
    <section class="flex-grow flex-row">
      <div class="flex-grow">A</div>
      <div>B</div>
    </section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S05" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<h1>Example - Simple 6</h1>
	<div data-demo-id="S06" class="flex-column">
    <header>H</header>
    <section class="flex-row flex-grow">
      <div class="flex-grow">A</div>
      <div class="flex-grow">B</div>
    </section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S06" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<!--//======================================================== -->
	<h1>Example - Simple 7</h1>
	<div data-demo-id="S07" class="flex-column">
    <header>H</header>
    <section class="flex-row flex-grow">
      <div class="">A</div>
      <div class="flex-grow">B</div>
      <div class="flex-grow">C</div>
      <div class="">D</div>
    </section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S07" class="line-numbers language-markup"><code class="language-markup"></code></pre> 
  
	<!--//======================================================== -->
	<h1>Example - Simple 8</h1>
	<div data-demo-id="S08" class="flex-column">
    <header>H</header>
    <section class="flex-row flex-grow flex-even">
      <div class="">A</div>
      <div class="">B</div>
      <div class="">C</div>
      <div class="">D</div>
    </section>
    <footer>F</footer>
</div>
	<pre for-demo-id="S08" class="line-numbers language-markup"><code class="language-markup"></code></pre>   
  
  
	<!--//======================================================== -->
	<h1>Example - Advance 1</h1>
	<div data-demo-id="A01" class="flex-column justify-end">
    <header>H</header>
    <section>A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="A01" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<!--//======================================================== -->
	<h1>Example - Advance 2</h1>
	<div data-demo-id="A02" class="flex-column justify-around">
    <header>H</header>
    <section>A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="A02" class="line-numbers language-markup"><code class="language-markup"></code></pre>

	<!--//======================================================== -->
	<h1>Example - Advance 3</h1>
	<div data-demo-id="A03" class="flex-column justify-between">
    <header>H</header>
    <section>A</section>
    <footer>F</footer>
</div>
	<pre for-demo-id="A03" class="line-numbers language-markup"><code class="language-markup"></code></pre>





  
 
  
</div>

/*Downloaded from https://www.codeseek.co/peterkc/sn-flexbox-layout-GZQeyq */
    //----------------------------------------------------------------------
// Order of prefixes:
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// 1. TWEENER - IE (10)
// 2. OLD - Firefox (Gecko)
// 3. OLD - * (iOS 6-, Safari 3.1-6, BB7)
// 4. NEW - * (Safari 6.1+. iOS 7.1+, BB10)
// 5. NEW - Spec (Firefox, Chrome, Opera, Edge)

//----------------------------------------------------------------------
// Flexbox Containers
@mixin flexbox {
    display: -ms-flex;      //1
    display: -ms-flexbox;   //1
    display: -moz-flex;     //2
    display: -webkit-box;   //3
    display: -webkit-flex;  //4
    display: flex;          //5
}

%flexbox { @include flexbox; }

//----------------------------------
@mixin inline-flex {
    display: -ms-inline-flexbox;
    display: -moz-inline-flex;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
}

%inline-flex { @include inline-flex; }

//----------------------------------------------------------------------
// Flexbox Direction
@mixin flex-direction($value: row) {
       -ms-flex-direction: $value;
      -moz-flex-direction: $value;
    @if $value == row-reverse {
    -webkit-box-direction: reverse;
       -webkit-box-orient: horizontal;
    } @else if $value == column {
    -webkit-box-direction: normal;
       -webkit-box-orient: vertical;
    } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
       -webkit-box-orient: vertical;
    } @else {
    -webkit-box-direction: normal;
       -webkit-box-orient: horizontal;
    }
    -webkit-flex-direction: $value;
            flex-direction: $value;
}

//----------------------------------------------------------------------
// Flexbox Wrap
@mixin flex-wrap($value: nowrap) {
    // No Webkit Box fallback.
    @if $value == nowrap {
        -ms-flex-wrap: none;
    } @else {
        -ms-flex-wrap: $value;
    }
       -moz-flex-wrap: $value;
    -webkit-flex-wrap: $value;
            flex-wrap: $value;
}

//----------------------------------------------------------------------
// Flexbox Flow (shorthand)
//
// No Webkit Box fallback.
@mixin flex-flow($values: (row nowrap)) {
        -ms-flex-flow: $values;
       -moz-flex-flow: $values;
    -webkit-flex-flow: $values;
            flex-flow: $values;
}

//----------------------------------------------------------------------
// Flexbox Order
@mixin order($int: 0) {
               -ms-flex-order: $int;
                   -moz-order: $int;
    -webkit-box-ordinal-group: $int + 1;
                -webkit-order: $int;
                        order: $int;
}

//----------------------------------------------------------------------
// Flexbox Grow
@mixin flex-grow($int: 0) {
        -ms-flex-positive: $int;
  -ms-flex-preferred-size: auto;
           -moz-flex-grow: $int;
         -webkit-box-flex: $int;
        -webkit-flex-grow: $int;
                flex-grow: $int;
}

//----------------------------------------------------------------------
// Flexbox Shrink
@mixin flex-shrink($int: 1) {
      -ms-flex-negative: $int;
       -moz-flex-shrink: $int;
    -webkit-flex-shrink: $int;
            flex-shrink: $int;
}

//----------------------------------------------------------------------
// Flexbox Basis
@mixin flex-basis($value: auto) {
            -moz-flex-basis: $value;
         -webkit-flex-basis: $value;
    -ms-flex-preferred-size: $value;
                 flex-basis: $value;
}

//----------------------------------------------------------------------
// Flexbox "Flex" (shorthand)

@mixin flex($fg: 1, $fs: null, $fb: null) {
    // Set a variable to be used by box-flex properties
    $fg-boxflex: $fg;

    // Box-Flex only supports a flex-grow value so let's grab the
    // first item in the list and just return that.
    @if type-of($fg) == 'list' {
        $fg-boxflex: nth($fg, 1);
    }
            -ms-flex: $fg $fs $fb;
       -moz-box-flex: $fg-boxflex;
           -moz-flex: $fg $fs $fb;
    -webkit-box-flex: $fg-boxflex;
        -webkit-flex: $fg $fs $fb;
                flex: $fg $fs $fb;
}

//----------------------------------------------------------------------
// Flexbox Justify Content
@mixin justify-content($value: flex-start) {
    @if $value == flex-start {
              -ms-flex-pack: start;
           -webkit-box-pack: start;
    } @else if $value == flex-end {
              -ms-flex-pack: end;
           -webkit-box-pack: end;
    } @else if $value == space-between {
              -ms-flex-pack: justify;
           -webkit-box-pack: justify;
    } @else if $value == space-around {
              -ms-flex-pack: distribute;
    } @else {
              -ms-flex-pack: $value;
           -webkit-box-pack: $value;

    }
       -moz-justify-content: $value;
    -webkit-justify-content: $value;
            justify-content: $value;
}

//----------------------------------------------------------------------
// Flexbox Align Items
@mixin align-items($value: stretch) {
    @if $value == flex-start {
           -ms-flex-align: start;
        -webkit-box-align: start;
    } @else if $value == flex-end {
           -ms-flex-align: end;
        -webkit-box-align: end;
    } @else {
           -ms-flex-align: $value;
        -webkit-box-align: $value;
    }
         -moz-align-items: $value;
      -webkit-align-items: $value;
              align-items: $value;
}

//----------------------------------
// Flexbox Align Self
//
// No Webkit Box Fallback.
@mixin align-self($value: auto) {
    @if $value == flex-start {
    -ms-flex-item-align: start;
    } @else if $value == flex-end {
    -ms-flex-item-align: end;
    } @else {
    -ms-flex-item-align: $value;
    }
        -moz-align-self: $value;
     -webkit-align-self: $value;
             align-self: $value;
}

//----------------------------------------------------------------------
// Flexbox Align Content
//
// No Webkit Box Fallback.
@mixin align-content($value: stretch) {
    @if $value == flex-start {
       -ms-flex-line-pack: start;
    } @else if $value == flex-end {
       -ms-flex-line-pack: end;
    } @else {
       -ms-flex-line-pack: $value;
    }
       -moz-align-content: $value;
    -webkit-align-content: $value;
            align-content: $value;
}

//-----------------------------------------------------------------------------
//-----------------------------------------------------------------------------
// Flexbox - Simple

.flex-column {
    @include flexbox;
    @include flex(0, 1, auto);
    @include flex-flow(column nowrap);
}

.flex-row {
    @include flexbox;
    @include flex(0, 1, auto);
    @include flex-flow(row nowrap);
    //@include flex-basis(auto);
}

/* items - (flex-grow)

   The flex-grow CSS property specifies the flex grow factor of a flex item.
   It specifies what amount of space inside the flex container the item should take up.
*/
.flex-column, .flex-row {
    .flex-grow   { 
      @include flex-grow(1);   
    }
    .flex-grow   {
        &.narrow { @include flex-grow(0.5); }
        &.wide   { @include flex-grow(2);   }
        &.hide   { @include flex-grow(0);   }
    }
}

/* items - (flex-shrink)

   The flex-shrink CSS property specifies the flex shrink factor of a flex item.
*/
.flex-column, .flex-row {
    .flex-shrink { @include flex-shrink(1); }
}

/* Helper
 */
.flex-column, .flex-row {
    &.flex-even > * { @include flex(1, 1, auto); }
}

//-----------------------------------------------------------------------------
//-----------------------------------------------------------------------------
// Flexbox - Advance

/* container (nowrap, wrap)
 */
.flex-column, .flex-row {
    &.nowrap { @include flex-wrap(nowrap); }
    &.wrap   { @include flex-wrap(wrap);   }
}

/* container (justify-content)

   The CSS justify-content property defines how the browser distributes space between and around flex items
   along the main-axis of their container.
 */
.flex-column, .flex-row {
    &.justify-start         { @include justify-content(flex-start);    }
    &.justify-end           { @include justify-content(flex-end);      }
    &.justify-center        { @include justify-content(center);        }
    &.justify-around        { @include justify-content(space-around);  }
    &.justify-between       { @include justify-content(space-between); }
}

/* container (align-items)

   The CSS align-items property aligns flex items of the current flex line the same way as justify-content
   but in the perpendicular direction.
 */
.flex-column, .flex-row {
    &.items-start           { @include align-items(flex-start);        }
    &.items-end             { @include align-items(flex-end);          }
    &.items-center          { @include align-items(center);            }
    &.items-baseline        { @include align-items(baseline);          }
    &.items-center          { @include align-items(center);            }
    &.items-stretch         { @include align-items(stretch);           }
}

.flex-row {
  &.items-stretch {
    header, footer {
      height: 100%;
    }
    section {
      //@include flex;
      //@inlcude flex-shrink(1);
    }
  }
}

/* container (align-content)

The CSS align-content property aligns a flex container's lines within the flex container
when there is extra space on the cross-axis.

   <container class="flex-column align-center">
      ...
    </container>
*/
.flex-column, .flex-row {
    &.align-start           { @include align-content(flex-start);      }
    &.align-end             { @include align-content(flex-end);        }
    &.align-center          { @include align-content(center);          }
    &.align-around          { @include align-content(space-around);    }
    &.align-between         { @include align-content(space-between);   }
}

//-----------------------------------------------------------------------------
//-----------------------------------------------------------------------------

body {
  font-size: 14px;
  font-family: 'Ubuntu', sans-serif;
  padding: 1rem;
  color: #222222;
  height: 100vh;
  width: 100vw;
}

// demo
.demo-container {
  > * { padding: 0.25rem; }
  
  h1 { 
    font-size: 2rem;
    padding: 0;
    padding-top: 2rem;
    
  }
  
  pre { 
    margin-bottom: 2rem;
    margin-top: 0;
    margin-left: 2rem;
    border: 0;  
  }

  .line-numbers .line-numbers-rows {
    left: -5.0rem;  
  }  
  
  :not(pre)>code[class*=language-], pre[class*=language-] {
      background: #fff;
  }  
  
  div.flex-column, div.flex-row {
    border: 1px black solid;
    height: 200px;
    min-height: 200px;
    min-width: 200px;
    max-width: 200px;
    margin-bottom: 0;
    margin-right: 1.0rem;
    
    :last-of-type {
      margin-right: 0;
    }
   
    header, footer, section, aside { 
      // min-height: 0.5rem; 
      // min-width: 0.5rem;
      // max-height: auto;
    }
    main { 
      display: block;
      @include flexbox;
      @include flex(1, 1, auto);  
      @include flex-flow(row nowrap); 
    }
    > * { padding: 0.25rem; }
  }  
    
  section.flex-column, section.flex-row { 
    padding: 0; 
    
    > div { padding: 0.25rem; }
    
    div:nth-of-type(1) { background-color: #f49c14; }
    div:nth-of-type(2) { background-color: #d55401; }
    div:nth-of-type(3) { background-color: #c1392b; }
    div:nth-of-type(4) { background-color: #bec3c7; }
  }
  
  header  { background-color: #2a80b9; }
  footer  { background-color: #2a80b9; }
  nav     { background-color: #f1c40f; }
  
  section:nth-of-type(1) { background-color: #bec3c7; }
  section:nth-of-type(2) { background-color: #f49c14; }
  section:nth-of-type(3) { background-color: #d55401; }
}



/*Downloaded from https://www.codeseek.co/peterkc/sn-flexbox-layout-GZQeyq */
    $( document ).ready(function() {
	$("[data-demo-id]").each(function(){
		var $el = $(this);
    var id = $el.attr("data-demo-id") ;
		var $pre = $("pre[for-demo-id='" + id + "']");  
		var $code = $pre.find('code').first();
		console.log("%s %o %o", id, $el, $code);
    console.log($el[0].outerHTML);
    $code.text($el[0].outerHTML);  
	});
});

Comments