123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <article id="docs-flex-grid">
  <div class="docs-code-live inner">
    <h1>Foundation 6 – Flexbox Grid </h1>
    <h3 class="subheader">Examples using the new flexbox grid system</h3>
    <hr/>
    <p>These examples showcase how you can use Foundation 6 to create easily customizable layouts using the optional Flexbox Grid.</p>
    <p><strong>Note:</strong>This example uses the stylesheet taken directly off the Foundation 6 example page. As of the current date of this example there isn't a direct CSS link to the optional Flex Grid layout</p>
    <br/>
    <h3>Flex Horizontal Alignment</h3>
    <p>Shows how you can use the alignment classes to easily position your content both horizontally and vertically</p>
    <b>Align right</b>
    <p>Right align the elements</p>
    <div class="row align-right align-container">
      <div class="column small-3">Element One</div>
      <div class="column small-3">Element Two</div>
      <div class="column small-3">Element Three</div>
    </div>
    <b>Align center</b>
    <p>Center align the elements

      <div class="row align-center align-container">
        <div class="column small-3">Element One</div>
        <div class="column small-3">Element Two</div>
        <div class="column small-3">Element Three</div>
      </div>
      <b>Align Spaced</b>
      <p>Space out the elements, with even spacing around the elements</p>

      <div class="row align-spaced align-container">
        <div class="column small-3">Element One</div>
        <div class="column small-3">Element Two</div>
        <div class="column small-3">Element Three</div>
      </div>
      <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#column-alignment" target="_blank">Click to view the docs about horizontal alignment</a></p>
      <hr/>
      <h3>Flex Vertical Alignment</h3>
      <p>Shows how you can use the vertical alignment classes to position your content vertically. By default flex items sit at the top of their parent, but you can manually set this on an element by element basis</p>
      <b>Align Top</b>
      <p>Default, aligns the items to the top of the parent</p>
      <div class="row align-top align-v-container">
        <div class="column">Element One
          <p>Here is some additional content making me taller</p>
        </div>
        <div class="column">Element Two</div>
        <div class="column">Element Three
          <p>I also have some additional content, I'm stuck to the top!</div>
      </div>
      <b>Align Middle</b>
      <p>Aligns the items to the middle of the parent</p>
      <div class="row align-middle align-v-container">
        <div class="column ">Element One
          <p>Here is some additional content making me taller</p>
        </div>
        <div class="column">Element Two</div>
        <div class="column">Element Three
          <p>I also have some additional content</div>
      </div>
      <b>Align Bottom</b>
      <p>Aligns the items to the bottom of the parent</p>
      <div class="row align-bottom align-v-container">
        <div class="column">Element One


        </div>
        <div class="column">Element Two
          <p>We are stuck to the bottom of the container</p>
        </div>
        <div class="column">Element Three
          <p>I also have some additional content, I'm stuck to the top!</div>
      </div>
      <p>Adding the alignment classes to the parent row will make all of the items inside of it align to the chosen vertical position. You can also specify on individual elements themselves where you want them to align by specifying either align-top, align-middle
        or align-bottom</p>
      <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#vertical-alignment" target="_blank">Find out more about vertical alignment on the docs</a></p>
      <h3>Flex ordering</h3>
      <p>Shows how you can use flexbox grid to re-order elements depending on your screen profile</p>
      <ul>
        <li><b>Medium + Large profile:</b> 1) Logo Title - 2) Social Media Bar - 3) Navigation Bar</li>
        <li><b>Small profile:</b> 1) Social Media Bar - 2) Logo Title - 3) Navigation Bar</li>
      </ul>
      <p>Resize your device to see this in action</p>

      <hr/>
      <div class="ordering-container">
        <div class="row align-justify">
          <div class="column small-12 medium-12  small-order-2 medium-order-1">
            <h3>Company Logo</h3>
          </div>
          <div class="column small-12 medium-expand large-expand small-order-1 medium-order-2">
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-facebook fa-inverse fa-stack-1x"></i>
             </span>
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-twitter fa-inverse fa-stack-1x"></i>
             </span>
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-reddit-alien fa-inverse fa-stack-1x"></i>
             </span>
            <span class="fa-stack fa-lg">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-google-plus fa-inverse fa-stack-1x"></i>
             </span>
          </div>
          <div class="column small-12 medium-expand large-expand small-order-3 medium-order-3">
            <ul class="menu vertical medium-horizontal large-horizontal" data-responsive-menu=" small-accordion medium-dropdown large-dropdown" style="width: 100%;">
              <li><a href="#">Home</a></li>
              <li class="has-submenu">
                <a href="#">About Us</a>
                <ul class="vertical submenu menu nested" data-submenu id="m2">
                  <li class="has-submenu nested">
                    <a href="#">Our Team</a>
                    <ul class="vertical submenu menu nested " data-submenu id="m3">
                      <li><a href="#">John Smith</a></li>
                      <li><a href="#">Suzzy Smith</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Blog</a></li>
                </ul>
              </li>
              <li class="has-submenu">
                <a href="#">Our Services</a>
                <ul class="vertical submenu menu nested" data-submenu>
                  <li><a href="#">Consulting</a></li>
                  <li><a href="#">Accounting</a></li>
                  <li><a href="#">Planning</a></li>
                </ul>
              </li>
              <li><a href="#">Resources</a></li>
            </ul>
          </div>
        </div>
      </div>
      <br/>
      <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#source-ordering" target="_blank">Find out more about the flex-box ordering options on the docs</a></p>
  </div>
</article>

<p class="p">Demo by Simon Codrington. <a href="http://www.sitepoint.com/foundation-6-the-new-flex-grid" target="_blank">See article</a>.</p>
            
          
!
            
              body {
  padding: 0 20px;
}

ul {
  margin-left: 20px;
}

.button {
  margin-top: 20px;
}

/* universal elements for the example */

.inner {
  max-width: 1200px;
  margin: auto;
  padding: 20px 15px 20px 0;
}

/* slight overrides to remove colours and styles added by an external stylesheet */

#docs-flex-grid .docs-code-live .row,
#docs-flex-grid .docs-code-live .column:nth-child(odd),
#docs-flex-grid .docs-code-live .column:nth-child(even) {
  background: transparent;
  border: none;
  font-size: 100%;
}


/* Horizontal Flex alignment example */

.align-container {
  background: #eee!important;
  padding: 15px;
}

.align-container .column:nth-of-type(1) {
  background: #3e9ddd!important;
}

.align-container .column:nth-of-type(2) {
  background: #9b59b6!important;
}

.align-container .column:nth-of-type(3) {
  background: #f39c12!important;
}


/* Vertical flex alignment example */

.align-v-container {
  background: #eee!important;
  padding: 15px 15px;
}

.align-v-container .column:nth-of-type(1) {
  background: #34495e!important;
}

.align-v-container .column:nth-of-type(2) {
  background: #16a085!important;
}

.align-v-container .column:nth-of-type(3) {
  background: #7f8c8d!important;
}


/* Ordering example */

.ordering-container {
  background: #eee!important;
  padding: 15px 15px;
}

.p {
  font-size: 14px;
  text-align: center;
}

.p a {
  text-decoration: underline;
}
            
          
!
            
              $(document).foundation();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console