A Pen by Marcus Hall.

A-Pen-by-Marcus-Hall.markdown

A Pen by Marcus Hall

A Pen by Marcus Hall on CodePen.

License.

index.html

<nav class="wrap">
    <ul class="wordlist">
       <li>First</li>
      <li>wokring</li>
      <li>barter</li>
       <li>hroisontal</li>
       <li>loremip</li>
       <li>blahblah</li>
       <li>Hewlloworld</li>
       <li>ookybooku</li>
       <li>hoolo</li>
       <li class="last">Fargonas</li>
       <li>Beastly</li>
       <li>YTojdn</li>
       <li>bullloo</li>
       <li>Hewlloworld</li>
       <li>ookybooku</li>
       <li>hoolo</li>
       <li>Fargonas</li>
       <li>Beastly</li>
       <li>YTojdn</li>
       <li class="last">Last</li>
    </ul>
  </nav>
  


    

style.scss

@import "compass";
@mixin respond-to($media) {
 @if $media == min100 {@media screen and (min-width: 100px) { @content; }} 
@else if $media == min200 {@media screen and (min-width: 200px) { @content; }} 
   @else if $media == min250 {@media screen and (min-width: 250px) { @content; }} 
   @else if $media == max300 {@media screen and (max-width: 300px) { @content; }} 
   @else if $media == min300 {@media screen and (min-width: 300px) { @content; }} 
   @else if $media == min310 {@media screen and (min-width: 310px) { @content; }} 
   @else if $media == min320 {@media screen and (min-width: 320px) { @content; }} 
   @else if $media == min350 {@media screen and (min-width: 350px) { @content; }}
   @else if $media == max350 {@media screen and (max-width: 350px) { @content; }}
   @else if $media == min375 {@media screen and (min-width: 375px) { @content; }}
   @else if $media == min384 {@media screen and (min-width: 384px) { @content; }} // some phones portrait- LG nexus 4
   @else if $media == min400 {@media screen and (min-width: 400px) { @content; }}
   @else if $media == min500 {@media screen and (min-width: 500px) { @content; }}
   @else if $media == min650 {@media screen and (min-width: 650px) { @content; }}
   @else if $media == min700 {@media screen and (min-width: 700px) { @content; }}
   @else if $media == min800 {@media screen and (min-width: 800px) { @content; }}
   @else if $media == min950 {@media screen and (min-width: 950px) { @content; }}
   @else if $media == min1000 {@media screen and (min-width: 1000px) { @content;}}
   @else if $media == min1150 {@media screen and (min-width: 1150px) { @content; }}
  
  
}






.wrap {
  background: #ccc;
  overflow-x: scroll;

  
}  
  
  
  .wordlist {


  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex; 
  flex-flow: row wrap;     /* NEW, Spec - Opera 12.1, Firefox 20+ */

    
list-style: none;
    
  @include respond-to(min100) { width: 300%;}
  @include respond-to(min500) { width: 150%;}
  @include respond-to(min700) { width: 100%;}

  
  
  
  

    
    
  li { 
    
    

text-transform: uppercase;
background: rgba(255,255,255, 0.3);
margin-left: 5px;
padding: 0 5px 0 5px;
white-space: wrap;     
    
width: auto;    
    

  }
    
  }


.last {
  -webkit-box-ordinal-group: 1;   
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;            
  -webkit-order: 1;              
  order: 1;                       
}

  


//   -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
//  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
//  -ms-flex-order: 1;              /* TWEENER - IE 10 */
//  -webkit-order: 1;               /* NEW - Chrome */
//  order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */




 //-webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
 // -moz-box-flex: 1;               /* OLD - Firefox 19- */
//   width: 20%;                     /* For old syntax, otherwise collapses. */
//  -webkit-flex: 1;                /* Chrome */
//  -ms-flex: 1;                    /* IE 10 */
//  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
//  white-space:nowrap;   
      
// flex:  1;

















body {
  padding: 2em;
  background: #79a693;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2 {
  font: bold 2em Sans-Serif;
  margin: 0 0 1em 0;
}
h2 {
  font-size: 1.5em;
}
p {
  margin: 0 0 1em 0;
}