Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <h1>Flexbox</h1>

<p><small>Source: <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox | CSS Tricks</a></small></p>

<h2>Basics</h2>

<figure><img src="https://cdn.css-tricks.com/wp-content/uploads/2011/08/flexbox.png" alt=""></figure>

<h2>Default</h2>
<p>Default behavior of elements in a flex container will follow the main axis or the cross axis.</p>

<p>The code <code>display: flex;</code> enables a flex context for direct child elements.</p>

<div class="container container-1" title="Flexbox container 1">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<h2>Flex-direction</h2>

<p>Establishes the main-axis. This shows <code>flex-direction: row-reverse;</code></p>

<div class="container container-2" title="Flexbox container 2">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<p>The following shows <code>flex-direction: column;</code></p>

<div class="container container-3" title="Flexbox container 3">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<p>The following shows <code>flex-direction: column-reverse;</code></p>

<div class="container container-4" title="Flexbox container 4">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<h2>Flex wrap</h2>

<p>By default flex items will try to fit in one line.</p>

<div class="container container-5" title="Flexbox container 5">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
</div>

<p>This container will wrap, <code>flex-wrap: wrap;</code></p>
<div class="container container-6" title="Flexbox container 5">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
</div>

<h2>Flex-flow</h2>

<p>Is a shorthand for <code>flex-direction</code> and <code>flex-wrap</code></p>

<p>The default is:</p>

<pre><code>flex-flow: row nowrap</code></pre>

<h2>Justify-content</h2>

<p>Defines the alignment along the main-axis.</p>
  
<blockquote>
  It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
</blockquote>

<pre><code>
flex-start - packed to the start of the line
flex-end - packed to the end of the line
center - centered on the line
space-between - evenly distributed on the line
space-around - equal space around each element, two units of space would separate the first and next element.
space-evenly - spacing between all elements are equal
</code></pre>

<p>The following shows: </p>

<pre><code>
.container-7 {
  display: flex;
  justify-content: space-evenly;
}
</code></pre>

<div class="container container-7" title="Flexbox container 7">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<h2>Align-items</h2>

<p>Defines the layout along the cross-axis</p>

<p>
  Values
  <ul>
    <li>flex-start</li>
    <li>flex-end</li>
    <li>center</li>
    <li>stretch</li>
    <li>baseline</li>
  </ul>
</p>

<p>The code below creates the following container:</p>

<pre><code>
.container-8 {
  background-color: #888;
  display: flex;
  <strong>align-items: center;</strong>
  height: 2rem;
}

.container-8 .item {
  height: 1rem;
}
</code></pre>

<div class="container container-8" title="Flexbox container 8">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<h2>Align-content</h2>

<p>Similar to <code>justify-content</code> for the cross-axis</p>

<pre><code>
.container-9 {
  background-color: #777;
  display: flex;
  flex-flow: row wrap;
  <strong>align-content: space-between;</strong>
  height: 8rem;
  width: 100px;
}
</code></pre>

<div class="container container-9" title="Flexbox container 9">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
  <div class="item item-6">Item 6</div>
</div>

<h2>Flex item properties</h2>

<p>The previous properties are applied to the flex container or parent.</p>

<p>Child elements of a flex container have the following additional properties.</p>

<dl>
  <dt><code><strong>order:</strong> int default 0</code></dt>
  <dd>sets the order of the item</dd>
    <dt><code><strong>flex-grow:</strong></code></dt>
  <dd>defaults to 1, sets the amount of relative space the item should take up</dd>
  <dt><code>flex-shrink</code></dt>
  <dd>defaults to 1, sets the amount of relative space the item should shrink to</dd>
  <dt><code>flex-basis</code></dt>
  <dd>This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.</dd>
  <dt><code>flex</code></dt>
  <dd>shorthand for flex-grow, shrink and basis combined, using the shorthand sets the other values intelligently</dd>
  <dt><code>align-self</code></dt>
  <dd>overrides the parent aligment</dd>
</dl>

              
            
!

CSS

              
                html, body {
  font-family: sans-serif;
  padding: 1rem .5rem;
}

/* * { outline: 1px dotted #efefef; }*/

dt { font-size: 1.25rem; margin-bottom: .5rem; }
dd { margin-bottom: .75rem; line-height: 1.4; }

.container {}

.container-1 {  
  background: #ccc;
  display: flex; /* or inline-flex */
}

.container-2 {
  background: #bbb;
  display: flex;
  flex-direction: row-reverse;
}

.container-3 {
  background: #ddd;
  display: flex; 
  flex-direction: column;
}

.container-4 {
  background: #eee;
  display: flex; 
  flex-direction: column-reverse;
}

.container-5 {
  max-width: 200px;
  background: #aaa;
  display: flex; 
}

.container-6 {
  max-width: 200px;
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

.container-6 .item {
  flex-direction: column;
}

.container-7 {
  background-color: #999;
  display: flex;
  justify-content: space-evenly;
}

.container-7 .item-2 {
  min-width: 40%;
}

.container-8 {
  background-color: #888;
  display: flex;
  align-items: center;
  height: 2rem;
}

.container-8 .item {
  height: 1rem;
}

.container-9 {
  background-color: #777;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  height: 8rem;
  width: 100px;
}

.item {}

.item-1 {
  background-color: aquamarine;
}

.item-2 {
  background-color: rebeccapurple;
}

.item-3 {
  background-color: chartreuse;
}

.item-4 {
  background-color: pink;
}

.item-5 {
  background-color: orange;
}

.item-6 {
  background-color: brown;
}


              
            
!

JS

              
                
              
            
!
999px

Console