Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="c-header">
  <h1>Responsive Flexbox Article Listing</h1>
  <p>Flexbox is an amazingly powerful layout tool. In this example I have created a responsive grid of articles that increased the amount of visible articles on the page at larger resolutions.</p>
</header>
<section class="c-posts">
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Hydrogen stratosphere control tower capacitor Saturn Lalande 21185. Control tower x-rays Luhman 16 Banard's Star engine lunar. Horizon engine capture Pluto Brahe sun continuum ion-drive control tower Proxima Centauri space-time booster. Core horizon subspace Voyager coordinates water. Contractors Banard's Star nozzle time Orion weightless Gemini extra-vehicular explore.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Mars NASA subspace crew warp Herschel stratosphere. Saturn sky zero-g stratosphere fuel cell Venus grounded crew yaw Ptolemy Challenger. Pioneer stratosphere Cassini Lalande 21185 Earth telemetry. Galileo uranium jumpsuit warp Hawking.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Challenger Voyager Sirius capsule Pioneer Kepler hyperspace launch. Singularity extra-vehicular circumnavigate burst. Procyon fuel cell asteroid subspace uranium Proxima Centauri prototype capsule.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Capsule crew Discovery ice spacecraft Pioneer gravity Picard. Lithium contractors meteor water core saucer white hole stars planet Picard Jupiter Skunkworks. Prototype clusters Voyager cosmos zero-g Pluto Skunkworks hatch. Circumnavigate core hyperspace motion comet Ptolemy.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Orbit warp atomic Buzz Lightyear. Uranium circumnavigate Halley Neptune nebula launch north Proxima Centauri engine.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Troposphere capacitor Newton Kepler. Jupiter ionosphere saucer Gemini Neptune core Alpha Centauri Venus comet Proxima Centauri Herschel. Banard's Star inertia laser contractors ion-drive fuel cell NASA. Panel solar-flare dwarf probe Sagan Sirius jetpack time laser. Columbia nebula horizon mesoshphere pulsar mission nuclear Sirius jetpack UFO.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>X-rays Orion capsule re-entry Mercury tank capture Mars control tower. Fusion Challenger physics flight Saturn . Warp countdown flare telemetry yaw rocket stars. Planet astronomy Venus reusable continuum inertia robotic re-entry booster Pioneer.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Solar crew hydrogen booster panel Europa array Saturn fusion Jupiter control tower singularity. Telemetry laser Venus wave capacitor gamma ray orbit lunar Uranus. Venus supernova Hawking ignite Mars Kirk Pluto.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Dormant container star system subspace solar binary inverter hyperspace warp. Yaw LiDAR hydrogen container galaxy heliosphere Houston Skunkworks gravity weightless pulsar pitch. Stars volatile ice kryptonite extra-vehicular Cassini crew meteor Earth positron. Aurora singularity coordinates nozzle Skunkworks valve orbit Herschel.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Hubble nebula Europa Gemini Skunkworks subspace uranium extra-vehicular Galileo release planet Banard's Star. Pulsar stars Tyson prototype lunar explore Pioneer ion-drive mesoshphere.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
  <article class="c-posts__item">
    <h2>Article Title Here</h2>
    <p>Hydrogen stratosphere control tower capacitor Saturn Lalande 21185. Control tower x-rays Luhman 16 Banard's Star engine lunar. Horizon engine capture Pluto Brahe sun continuum ion-drive control tower Proxima Centauri space-time booster. Core horizon subspace Voyager coordinates water. Contractors Banard's Star nozzle time Orion weightless Gemini extra-vehicular explore.</p>
    <p><a href="#" class="c-btn">Read More</a></p>
  </article>
</section>
<footer class="c-footer">
  <p>Ipsum provided by <a href="http://interstellaripsum.com?ref=codepen?pen=wWWmNB" target="_blank">InterstellarIpsum.com</a></p>
</footer>
              
            
!

CSS

              
                .c-posts {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  padding: 5%;
  
  &__item {
    flex-grow: 1;
    padding-bottom: 2em;
    
    &:first-child {
      flex-grow: 2;
    }
  }
}

@media all and (min-width:600px) {
  .c-posts {
    &__item {
      flex-basis: 50%;
      padding-right: 5%;
      
      &:first-child {
        flex-basis: 100%;
      }
    }
  }
}

@media all and (min-width:1000px) {
  .c-posts {
    &__item {
      flex-basis: 33%;
      
      &:first-child {
        flex-basis: 66%;
      }
    }
  }
}

@media all and (min-width:1400px) {
  .c-posts {
    &__item {
      flex-basis: 25%;
      
      &:first-child {
        flex-basis: 50%;
      }
    }
  }
}

/* Other Non-Flexbox Related Styles */
.c-header,
.c-footer {
  background: #EDD382;
  text-align: center;
  padding: 2em;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.6em;
  
  h1, h2, p {
    max-width: 40em;
    margin: 0 auto;
    
    &:not(:last-child) {
      margin-bottom: 1em;
    }
  }
  
  h1 {
    text-transform: uppercase;
    font-weight: 900;
  }
  
  a {
    color: #000;
  }
}

.c-footer {
  p {
    font-weight: 300;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Georgia', Times, serif;
  line-height: 1.6em;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: calc(130% + 1vw);
  font-weight: normal;
}

h2 {
  font-size: 1.5em;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
}

a {
  color: #0F5257;
}

.c-btn {
  color: #000;
  display: inline-block;
  border-bottom: 4px solid #000;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 900;
  letter-spacing: .1em;
  padding: .3em 0;
  position: relative;
  transition: .2s all;
  
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #FF521B;
    height: 0%;
    transition: .2s all;
    left: 0;
    z-index: -10;
  }
  
  &:hover {
    padding-left: .75em;
    padding-right: .75em;
    color: #fff;
    border-color: #FF521B;
    
    &:before {
      height: 100%;
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console