cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="container gutters-all">
  <div class="col-11 col-push-half">
    <h1 class="text-center">Juiced: Changing the Container Flow</h1>
    <p>By adding the classes listed below to your <samp>.container</samp>, you can easily align, stretch, and position your flex items.</p>
    <small>Note: these are based on a flex direction set to row (the Juiced default setting).  Using another direction will change the flow.</small>
    <h2 class="text-center">Item justification classes:</h2>
    <ol>
      <li>
        <div class="text-left"> <samp>.justify-space-around</samp> adds spacing evenly around all Flex items.</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-space-around text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        .col-auto
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
    
    <ol start="2">
      <li>
        <div class="text-left"> <samp>.justify-space-between</samp> adds spacing evenly between all Flex items.</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-space-between text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        .col-auto
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
    
    <ol start="3">
      <li>
        <div class="text-left"><samp>.justify-start</samp> puts all the items in the start position.</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-start text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        .col-auto
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
    
    <ol start="4">
      <li>
        <div class="text-left"> <samp>.justify-end</samp> moves the Flex items to sit at the end of the container.</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-end text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa;">
        push me to the end
      </div>
      <div class="col-auto" style="background:#b2a;">
        .col-auto
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
    
    
    <ol start="5">
      <li>
        <div class="text-left"><samp>.justify-center </samp> moves the items to sit in the center.</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-center text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        .col-auto
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
      
    <h2 class="margin-top text-center">Vertical alignment classes:</h2>
        
    <ol start="6">
      <li>
        <div class="text-left"><samp>.items-center</samp>  will make vertical-centering a breeze!</div>
      </li>
    </ol>
    <div class="container gutters items-center justify-center text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#1aa; height: 50px">
        <div class="container items-center" style="height: 50px;">
          <div class="col-12">items</div>
        </div>
      </div>
      <div class="col-auto" style="background:#bfa;">
        Easy-peasy vertical centering
      </div>
      <div class="col-auto" style="background:#af1; height: 100px;">
       oh so pretty
      </div>
     </div>
    
    
    <ol start="7">
      <li>
        <div class="text-left"> <samp>.items-start</samp> forces the items to sit at the top of the container.</div>
      </li>
    </ol>
    <div class="container gutters items-start justify-center text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa; height:50px;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        I'm so fly at the top of my container!
      </div>
      <div class="col-auto" style="background:#af1;">
       oh so pretty
      </div>
     </div>
    
    
    <ol start="8">
      <li>
        <div class="text-left"> <samp>.items-end</samp> forces the items to sit at the bottom of the container.</div>
      </li>
    </ol>
    <div class="container gutters items-end justify-center text-center" style="background:#f2f2f2;">
      <div class="col-auto" style="background:#faa; height:50px;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        I sit on the bottom
      </div>
      <div class="col-auto" style="background:#af1;">
      And that's okay
      </div>
     </div>
    
    
    <ol start="9">
      <li>
        <div class="text-left"> <samp>.items-stretch</samp> forces all items to stretch to the height of the container.</div>
      </li>
    </ol>
    <div class="container gutters items-stretch justify-center text-center" style="background:#f2f2f2; height:50px;">
      <div class="col-auto" style="background:#faa;">
        items are spaced
      </div>
      <div class="col-auto" style="background:#b2a;">
        I am stretchy
      </div>
      <div class="col-auto" style="background:#af1;">
      And that's okay
      </div>
     </div>
    
    
    <ol start="10">
      <li>
        <div class="text-left"> <samp>.items-baseline</samp>  causes the items to sit on their baseline.</div>
      </li>
    </ol>
    <div class="container gutters items-baseline justify-center text-center" style="background:#f2f2f2; height: 100px;">
      <div class="col-sm-4" style="background:#faa; ">
         
       A margin on one item, will shift the others to match the baseline.
        <div class="sm-display-none color-dark">
          (<small>Not so noticable when on mobile, as the baseline is no longer applicable when columns collapase</small>)
        </div>
      </div>
      <div class="col-sm-4" style="background:#b2a;">
        I sit with my friends
      </div>
      <div class="col-sm-4" style="background:#af1; margin-top: 15px;">
      We sit on the baseline
      </div>
     </div>
    
    
</div>
            
          
!
            
              .margin-top{
  margin-top:50px;
}
ol {
  margin-top: 40px;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console