見た目で選ぶ！CSSのFlexboxを使いこなそう

CSSのFlexboxとは、WEBサイト作成でよく用いられるレイアウト手法になります。

使い方に慣れるまでは複雑に感じますが、非常に便利なCSSプロパティですのでしっかりと使いこなせるようになりましょう。

Flexboxとは

Flexible Box Layout Moduleを略してflexboxと呼ばれています。CSS3から導入されたレイアウトモジュールです。

まずはどんなことができるのかをビジュアルで確認してみましょう。

上記のような要素に対して、FlexboxのCSSを反映させて横並びにしてみます。

HTMLと追加するCSSのコードは以下の通りです。

<div class="flex">
  <div class="square one">01</div>
  <div class="square">02</div>
  <div class="square">02</div>
</div>

.flex{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.left{
  -webkit-justify-content :  flex-start;
  -ms-flex-pack :  start;
  justify-content :  flex-start;
}

コンテナとアイテム

Flexboxにはコンテナとアイテムという概念があります。コンテナは上記の例でいう「クラスflex」の部分、その子要素がアイテムと呼ばれます。当記事でもコンテナとアイテムという名称を使用しています。

Flexboxの特徴

例を見ていたいてなんとなくどういうものかがわかったかと思いますが、Flexboxの大まかな特徴を紹介します。

特徴1. 子要素の高さがそろう

CSSでFlexboxをかけると、アイテムの高さがそろいます。これまでの横並びで使用していた、floatやinline-blockなどはそれぞれの要素の高さに依存していましたが、Flexboxを使用すると、自動でアイテムの高さを調整してくれます。

特徴2. レイアウトを独自のプロパティで変更

上記の例で試していただいたと思いますが、CSSプロパティを使用することでアイテムのレイアウトを変更ができます。どのようなプロパティがあるかは後述いたしますので、その特徴を覚えましょう。

コンテナに使用するプロパティ

flexboxでは、コンテナに使用するプロパティとアイテムに使用するプロパティでわかれています。

まずはコンテナに使用するプロパティを紹介します。

flex-directionで縦横の並びを指定

flex-directionの記載方法は以下の通りです。

.flex{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

flex-wrapで改行指定

flex-wrap の記載方法は以下の通りです。

.flex{
  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

コンテナサイズがアイテムの合計サイズよりも小さくなると、デフォルトでは改行せず無理くりコンテナ内に納めますが、改行を許可すると2行以上に改行され表示されます。

flex-flowで省略記載

flex-flowプロパティを使用すると上記で紹介した、flex-directionとflex-wapプロパティを同時に記載できます。

.flex{
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;
}

CSSの行数を減らして記載することができます。

justify-contentで列のレイアウト指定

justify-contentは一番初めの例でも紹介した、列のレイアウトを指定するプロパティです。

.flex{
  -webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

align-itemsで上下の配置を調整

align-itemsも一番初めの例でも紹介した、上下の配置を指定するプロパティです。

.flex{
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

align-contentで行のレイアウトを調整

align-contentはjustify-contentの上下バージョンです。

.flex{	
  -ms-flex-line-pack: stretch;
	align-content: stretch;
}

コンテナの高さが決まっているときに有効です。 デモは割愛させていただきます。

アイテムに使用するプロパティ

次にアイテムに使用するプロパティを紹介していきます。

また、アイテムそれぞれにプロパティを使用するので、htmlに以下のようなクラスを追加してデモを作成します。

<div class="flex">
  <div class="square one">01</div>
  <div class="square two">02</div>
  <div class="square three">03</div>
</div>

orderで並び順を変更

アイテムにorderプロパティを使用することで、任意に並び順を変更することが可能です。

.one{
order:2;
}
.two{
order:3;
}
.three{
order:1;
}

align-self で垂直方向の位置指定

アイテム単位でalign-itemsと同じように指定できます。

.flex{
  -ms-flex-item-align: normal;
  align-self: normal;
}

アイテムの幅指定

アイテムの幅を個別に指定できます。アイテムの幅を指定するためのプロパティは複数あります。

まとめて指定するプロパティflexが推奨されています。

.flex{
  -webkit-box-flex:1;
	-ms-flex:1 1 10%;
	flex:1 1 10%;
}

まとめ

flexboxは横並びだけでなく、レイアウトをするうえでも大変便利なプロパティです。

ぜひ使いこなして、レイアウトを楽にしましょう。