<h1>display: flex;</h1>

<p>It's not <em>block</em>, <em>inline</em>, or <em>inline-block</em>... it's: FLEX!</p>

<p>the <em>relativly</em> new and wonderful layout system!</p>



<h2>flex-direction: row;</h2>

<p>Default is</p>
<pre><code>
flex-direction: row;
justify-content: flex-start; /* left */
align-items: flex-start; /* top */
</code></pre>

<section class='with-a-row'>
  <div class="box a">Box a</div>
  <div class="box b">Box b</div> 
  <div class="box c">Box c</div>
  <div class="box d">Box d</div>
</section>



<h2>flex-direction: column;</h2>

<p>Default is</p>
<pre><code>
flex-direction: column;
justify-content: flex-start; /* top */
align-items: flex-start; /* left */
</code></pre>

<section class='with-a-column'>
  <div class="box a">Box a</div>
  <div class="box b">Box b</div> 
  <div class="box c">Box c</div>
  <div class="box d">Box d</div>
</section>


<br>
<hr>

<p>Did you see how the 'justify' and 'align' direction <em>switch</em> ? depending on the flex-direction?</p>


.with-a-row {
  display: flex;
  flex-direction: row; /* (default) */
  justify-content: flex-start; /* left (default) */
  align-items: flex-start; /* top (default) */
}

.example {
  display: flex; /* would have all those ^ */
}


.with-a-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* top (default) */
  align-items: flex-start; /* left (default) */
}


/* "Row" goes from side to side on an X axis */
/* "Column" goes up and down on a Y axis */

/*
  try out:

  align-items: center;
  or
  justify-content: flex-end;
  or
  change the flex-direction

  on both of them and see what happens
*/


























/* JUST for presentation */
.box {
  padding: 6px;
  border-radius: 6px;
}
.a {
  width: 50px;
  height: 50px;
  background-color: #aadee9;
}

.b {
  width: 50px;
  height: 80px;
  background-color: #a9d9bc;
}

.c {
  width: 90px;
  height: 90px;
  background-color: #ff9197;
}

.d {
  width: 40px;
  height: 40px;
  background-color: #fbf49c;
}

section {
  border: 1px solid lightgray;
  background-color: rgba(0,0,0,.02);
}

section + section {
  margin-top: 30px;
}

h2 {
  margin-top: 60px;
}

body {
  padding: 20px;
  padding-bottom: 100px;
}

.with-a-row {
  min-height: 130px;
  /* just to give space to allow for flex-end to yield visual results */
}

.with-a-column {
  min-height: 340px;
  /* just to give space to allow for flex-end to yield visual results */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.