• 2017.10.25
  • [最終更新日]2018.06.20
  • プログラミング

【CSS3】とりあえず気軽にFlexboxを使ってみる

【CSS3】とりあえず気軽にFlexboxを使ってみるのイメージ画像

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。

使いこなすまで時間がかかりそうだったので、とりあえずよく使う設定だけ紹介します。

flexboxの使い方

flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけです。

flexboxコンテナ: flex-wrap

flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrap: nowrap;

flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。
確かこっちが初期値だったと思いますが、実際の制作現場でこちらを使用することはあまりないのではないでしょうか?

flex-wrap: wrap;

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。
個人的にはこちらが初期値であって欲しかったです。

flexboxコンテナ: justify-content

justify-content: space-between;

flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。

justify-content: space-around;

flexアイテムは全てのアイテムは等間隔に配置されます。

flexboxコンテナ: flex-direction

「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。

.flex-container {
  flex-direction: row;
}
flexアイテムは左から右へ(ltr)水平方向に配置されます。

.flex-container {
  flex-direction: row-reverse;
}
flexアイテムは上から下へ垂直方向に配置されます。

.flex-container {
  flex-direction: column;
}
flexアイテムは左から右へ(ltr)水平方向に配置されます。

.flex-container {
  flex-direction: column-reverse;
}
flexアイテムは下から上へ垂直方向に配置されます。

「flex-direction」のデフォルト値: row

「row」はデフォルト値なので、「 row-reverse」だけ覚えておきたいですね。