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.

              <h1>Flexbox Boot Camp</h1>
<h5>Your Mission:</h5>
<p>This codepen template is your sandbox to try out properties and see them applied to the demo below. Save or fork this template, edit the CSS properties, and then see your soldiers (flex-items) fall in line and follow your orders.</p>

<div class="flex-container">
  <div class="flex-item soldier-1">Soldier 1 <small>Yes sir!</small></div>
  <div class="flex-item soldier-2">Soldier 2 <small>Ten hut!</small></div>
  <div class="flex-item soldier-3">Soldier 3 <small>Roger!</small></div>
  <div class="flex-item soldier-4">Soldier 4 <small>Sir!</small></div>  
  <div class="flex-item soldier-5">Soldier 5 <small>Yes sir!</small></div>
  <div class="flex-item soldier-6">Soldier 6 <small>Ten hut!</small></div>
  <div class="flex-item soldier-7">Soldier 7 <small>Roger!</small></div>
  <div class="flex-item soldier-8">Soldier 8 <small>Sir!</small></div>  
  <div class="flex-item soldier-9">Soldier 9 <small>Yes sir!</small></div>
  <div class="flex-item soldier-10 rogue-flex-item">Soldier 10 <small>I want to lead!</small></div>
  <div class="flex-item soldier-11">Soldier 11 <small>Roger!</small></div>
  <div class="flex-item soldier-l2">Soldier 12 <small>Sir!</small></div>  
<!-- /.flex-container -->

<h4>Notes: <a href="https://bootstrapcreative.com/resources/flexbox-cheat-sheet/" target="_blank">Responsive Flexbox Cheat Sheet</a></h4>
<h2>Flex Container <small>commanding officer</small></h2>
<li>Flex layout gives the container the ability to alter its items' width/height (and order) to best fill the available space of the container.</li>
<li>The container has a main axis and cross axis which depends on the flex direction. Each axis has a start and end. For example, if you set the flex direction to column. The main axis is vertical and the cross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the cross axis is vertical.</li>
<h2>Flex Items <small>soldiers</small></h2>
  <li>Flexbox items are like soldiers because they follow the orders given by their container. Just like soldiers listen to their commanding officer in battle.</li>
  <li>By default, flex items all want to appear on the same line</li>
  <li>Individual flexbox items or soldiers can be targeted with a unique class and property to override the orders given by their container. The example below uses the class <code>.rogue-flex-item</code> to make adjustments to only Soldier J in red.</li>

              .flex-container {
  Do you want the container to behave like a block on inline element?
  The containers can act like block or inline elements. This demo has multiple flexbox containers so if you change this to inline-flex they will nudge up together like a list of images would.
    flex = makes the container act display block
    inline-flex = makes the container act display inline
  Do you want your main axis to be vertical or horizontal?
    row (default) = left to right
    row-reverse = right to left
    column = top to bottom
    column = reverse = bottom to top
  How do you want the extra space to be distributed along the main axis?
    flex-start (default) = items anchored to the start
    flex-end = items anchored to the start
    center = items centered
    space-between = items evenly distributed in the line. First item in on the start and last item is at the end
    space-around = start and end items are not to the edge but have 1 unit of space on each side
    space-evenly = similar to space-around, except all space is the same

  How do you want the extra space of LINES of items to be distributed along the cross axis?
    flex-start = items anchored to the start
    flex-end = items anchored to the end
    center = items centered
    space-between  first line at the start of the container and the last one is at the end
    space-around = lines are evenly distributed with equal space around each line
    stretch (default) = lines stretch to take up the space that is left
  How do you want the extra space between items to be distributed along the cross axis?
    flex-start = cross axis align items to start
    flex-end = cross axis align items to end
    center = cross axis align items center
    baseline = align baselines
    stretch (default) = stretch to fill the container
  Do you want the items to wrap if they don't fit on one line?
  by default, flex items will try to fit all the items onto one line. 
    nowrap (default) = all items will try to stay on one line
    wrap = if items don't fit they will wrap and create a new line below
    wrap-reverse = if items don't fit they will wrap and create a new line above
  This is a shorthand flex-direction and flex-wrap properties,
  flex-flow: <‘flex-direction’> || <‘flex-wrap’>

.rogue-flex-item  {
  Do you want to change the order this item is listed?
  order: <number>;  default is 0 - like its relative position
  Do you want to have this item to take up more space than the other items?
  flex-grow: <number>;  default 0 
  Do you want this item to take less space than the other items?
  flex-shrink: <number>;  default 1 
  Do you want to set the default size of this item before the other item sizes are set?
    <length> =
    auto (default) =
  Do you want to override the align-items value for this item?
    auto = 
    flex-start =
    flex-end =
    center =
    baseline =
    stretch (default or what is set in align-items on the container) =
  This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

/* for demo purposes */
body {
  background: radial-gradient(circle, #f1e1cb, #ddbe92);
li {margin-bottom:.5rem;}

h1 {
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
h2 {
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  font-weight: bold;
small {
  font-style: italic;
.rogue-flex-item {
.flex-container  {
  border:10px solid #282f23;
.flex-item {
  background:rgba(255, 255, 255, .8);
  border:5px solid #727b72;
  text-align: center;
.flex-item small {
.flex-item:before {
  content:" ";
  background:url('https://77784758994c4367a843b5378c104e06.production.codepen.plumbing/img/army-man.png') no-repeat;
  background-size: 50px 50px;
  margin:0 auto;
  display: block;
a {
🕑 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.