ザリガニデザインオフィス

align-contentが効かないのはflex-directionのせい?のサムネイル

align-contentが効かないのはflex-directionのせい?

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

やりたいこと

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

デモはこちら

ダメな例

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

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

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

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

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

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

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

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

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

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

上級編

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

参考