JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<p>Most Flexbox demos focus around `flex-direction: row`.  Even the wording on the W3C specification assumes that the most common usage will be with rows.  In order to get the columns to wrap, the flex container must be restricted to a specific height.</p>

<h1>Unrestricted</h1>

<p>Notice how the lack of height does not force the elements to wrap to another column, despite the flex of the children specifying that they should take up 30% of length the main axis.</p>

<div class="columned unrestricted">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

<h1>Restricted</h1>

<div class="columned">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

<h1>Equalized</h1>

<div class="columned equalized">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

<h1>Space Between</h1>

<div class="columned space-between">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
</div>

CSS

@import "compass/css3";

$flex-wrap-required: true;

/* unrestricted */
.columned.unrestricted {
  height: auto;
}

.columned.unrestricted div {
  @include flex(1 0 30%);
}

/* restricted/common */
.columned {
  @include display-flex;
  @include flex-flow(column wrap);
  height: 10em;
  border: 1px solid;
  background: #CCC;
  padding: .25em;
  margin: 1em 0;
}

.columned div {
  @include flex(1 1 auto);
  margin: .25em;
  border: 1px solid;
}

/* equalized */
.columned.equalized div {
  @include flex(1 1 40%);
}

/* space between */
.columned.space-between {
  @include justify-content(space-between);
}

.columned.space-between div {
  -webkit-flex: 0 0 2em;
  -ms-flex: 0 0 2em;
  flex: 0 0 2em;
}

/*
  Fancy colors!
  Nothing to see past here ...
*/

.a {
  background: lighten(purple, 35%);
}

.b {
  background: lighten(blue, 25%);
}

.c {
  background: lighten(green, 15%);
}

.d {
  background: yellow;
}

.e {
  background: orange;
}

.f {
  background: lighten(red, 20%);
}