CSS3 Flexboxで作成できるレイアウトの定石プロパティのサンプル

Chromeデベロッパーツールでid="f"やclass="i"などのCSSのコメントアウトを変更する。

<div id="f">
  <div class="i i1">item1</div>
  <div class="i i2">item2</div>
  <div class="i i3">item3</div>
  <div class="i i4">item4</div>
  <div class="i i5">item5</div>
</div>

#f {
  display: flex;
  overflow: scroll;
  /*flex-direction: column;*/
  /*flex-wrap: wrap;*/
  /*align-items: flex-start;*/
  /*align-items: flex-end;*/
  /*justify-content: center;*/
  /*justify-content: flex-end;*/
  /*justify-content: space-around;*/
  /*justify-content: space-between;*/
  width: 300px;
  /*width: 500px;*/
  height: 300px;
  /*height: auto;*/
  border: 10px solid #666;
  background: #eee;
}
.i {
  /*flex-grow: 1;*/
  margin: 10px;
  background: #000;
  color: #fff;
}
.i1 {
  /*flex-grow: 1;*/
  /*align-self: flex-start;*/
  /*align-self: center;*/
  /*align-self: flex-end;*/
  /*margin-top: auto;*/
  /*margin-right: auto;*/
  /*margin-left: auto;*/
  /*margin: 10px auto;*/
}
.i4 {
  /*flex-grow: 1;*/
  /*align-self: flex-start;*/
  /*align-self: center;*/
  /*align-self: flex-end;*/
  /*margin-top: auto;*/
  /*margin-right: auto;*/
  /*margin-left: auto;*/
  /*margin: 10px auto;*/
}
.i5 {
  /*flex-grow: 1;*/
  /*align-self: flex-start;*/
  /*align-self: center;*/
  /*align-self: flex-end;*/
  /*margin-top: auto;*/
  /*margin-right: auto;*/
  /*margin-left: auto;*/
  /*margin: 10px auto;*/
}