display : flexは便利でもうfloatとclearfixには戻れない感じです。そんな便利なflexですが、先日Twitterでalign-contentが効かないという話がありましたので、その原因と仕組みについて解説します。

やりたいこと

実現したいのは、縦方向に均等に配置したい以下のような感じです。

デモはこちら

ダメな例

.wrapper{
  display : flex;
  flex-direction : column;
  align-content : space-between;
  flex-wrap : wrap;
}

flexを使って配置し、今回は縦方向に均等に並べたいのでflex-directionをcolumnにし、align-content : space-betweenを使いました。一見すると正しいように見えますが、実はうまくいきません。

正しい例

.wrapper{
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  flex-wrap : wrap;
}

align-contentをjustify-contentに直しました。えっ、justify-contentって横方向の整列に関するプロパティじゃないの？と思う方もいるかもしれません。そこに実は落とし穴があったのです。

justify-contentは「横方向」の整列ではない

justify-content、align-contentはそれぞれ横方向・縦方向の整列だと思っている方も多いでしょう（自分もこの一件があるまでそう思っていました）。この表現は少し違い、正確にはそれぞれ「主軸方向」「主軸と交差する方向」の整列です。

では「主軸」って何でしょうか。ここで記事タイトルにもあるflex-directionの登場です。実はflex-directionが主軸方向を定めていたのです。デフォルトでは横方向を主軸と定めているので、justify-contentが横方向を整列させます。

ダメな例の場合、flex-directionをcolumn、つまり縦方向に指定したので主軸は縦方向になります。そのため縦方向の整列にはjustify-contentを指定する必要があります。

flex-directionをやめればいいんじゃない？

ここでの例の場合、flex-directionをデフォルトに直すことでも解決します。ただ、flex-directionをcolumnにする必要がある場合、例えばリスト上から下、左から右へ流していく場合などはflex-directionをcolumnにするでしょう。（デモの3番目の例）

余談

余談になりますが、flex-direction : rowで、なおかつその要素のdir属性がrtlだと（右から左へ読むアラビア語など）主軸は右から左となります。そのため通常のflex-direction : row-reverseと挙動が逆になります。dir=”rtl”でも縦方向は変わらず、上から下が主軸になります（読む方向は上から下なので）。ややこしいですねー。

参考

• flex-direction | MDN
• justify-content | MDN
• 主軸 | MDN