<h1>flex-flow:</h1>
<p>'<em>회색 처리한 값</em>'은 기본값으로써 생략 가능하다는 것을 의미함.</p>
<main>
  <section>
    <h2><em>row nowrap</em> <br> <em>row</em> <br> <em>nowrap</em></h2>
    <div class="a z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2><em>row</em> wrap <br> wrap</h2>
    <div class="b z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2><em>row</em> wrap-reverse <br> wrap-reverse</h2>
    <div class="c z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>row-reverse <em>nowrap</em> <br> row-reverse</h2>
    <div class="d z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>row-reverse wrap</h2>
    <div class="e z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>row-revers wrap-reverse</h2>
    <div class="f z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column <em>nowrap</em> <br> column</h2>
    <div class="g z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column wrap</h2>
    <div class="h z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column wrap-reverse</h2>
    <div class="i z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column-reverse <em>nowrap</em> <br> column-reverse</h2>
    <div class="j z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column-reverse wrap</h2>
    <div class="k z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
  <section>
    <h2>column-reverse wrap-reverse</h2>
    <div class="l z">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </section>
</main>

.z{display:inline-flex;width:99px;height:99px;outline:5px solid rgba(0,0,0,.5);color:white;vertical-align:top;}
.z>*{flex:0 0 33px;}
.z>:nth-child(1){background:orange;}
.z>:nth-child(2){background:red;}
.z>:nth-child(3){background:green;}
.z>:nth-child(4){background:blue;}

.a{flex-flow:row nowrap;}
.b{flex-flow:row wrap;}
.c{flex-flow:row wrap-reverse;}

.d{flex-flow:row-reverse nowrap;}
.e{flex-flow:row-reverse wrap;}
.f{flex-flow:row-reverse wrap-reverse;}

.g{flex-flow:column nowrap;}
.h{flex-flow:column wrap;}
.i{flex-flow:column wrap-reverse;}

.j{flex-flow:column-reverse nowrap;}
.k{flex-flow:column-reverse wrap;}
.l{flex-flow:column-reverse wrap-reverse;}