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

CSS3 Flexboxの定石プロパティ

本日2017年4月11日(火)からMicrosoftのWindows VistaとIE9のサポートが終了した。

これに伴い、ブラウザの推奨環境がIE9からIE11に変更されるサイトが多くなる。

IE11になると使用できるCSSプロパティが多くなる。その中でもdisplay: flexを指定することで実現できるFlexboxはレイアウトの表現の幅が広がるため積極的に使っていきたい。

Flexbox関連のプロパティは多いため最初は思い通りのレイアウトを作成しづらいと思うが、よく使用するプロパティがいくつか存在しており、これらを使用するだけで、よく使用されるレイアウトの約9割を作成できる。

使用するHTMLとCSSは以下の通り。

CSSでコメントされている部分をChromeデベロッパーツールのElementsのStylesやエディタのHTMLコメントの追加・削除で切り替えながら表示を試していけば、いろいろなレイアウトを実現できる。

HTML

<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>

CSS

#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;*/
}

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

ちなみにoverflow:scroll;が付いているのは子要素が親要素display:flexの外にはみ出したときに非表示にならないようにするためである。