<h2>プロパティ:flex-direction</h2>
<h3>横並び・左から右(デフォルト)</h3>
<div class="wrapper-element-flexBox flex-direction_row">
  <div class="element bg-color01">BLOCK01</div>
  <div class="element bg-color02">BLOCK02</div>
  <div class="element bg-color03">BLOCK03</div>
</div>

<h3>縦並び・上から下</h3>
<div class="wrapper-element-flexBox flex-direction_column">
  <div class="element bg-color01">BLOCK01</div>
  <div class="element bg-color02">BLOCK02</div>
  <div class="element bg-color03">BLOCK03</div>
</div>

<h3>横並び・右から左</h3>
<div class="wrapper-element-flexBox flex-direction_row-reverse">
  <div class="element bg-color01">BLOCK01</div>
  <div class="element bg-color02">BLOCK02</div>
  <div class="element bg-color03">BLOCK03</div>
</div>

<h3>縦並び・下から上</h3>
<div class="wrapper-element-flexBox flex-direction_column-reverse">
  <div class="element bg-color01">BLOCK01</div>
  <div class="element bg-color02">BLOCK02</div>
  <div class="element bg-color03">BLOCK03</div>
</div>
/* basic */
.wrapper-element-flexBox{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
/* property */
/*横並び・左から右(デフォルト)*/
.flex-direction_row{
  flex-direction: row;	
}
/*縦並び・上から下*/
.flex-direction_column{
  flex-direction: column;
}
/*横並び・右から左*/
.flex-direction_row-reverse{
  flex-direction: row-reverse;
}
/*縦並び・下から上*/
.flex-direction_column-reverse{
  flex-direction: column-reverse;
}

/* 背景色 */
.bg-color01 {
   background-color: #C7E7FA;
}
.bg-color02 {
   background-color: #FFFBD0;
}
.bg-color03 {
   background-color: #F9CFB9;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.