<h1>基本形</h1>
<h2>ブロック要素を横並びにする</h2>
<div class="wrapper-element-flexBox">
  <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;
}

/* 背景色 */
.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.