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"でも縦方向は変わらず、上から下が主軸になります（読む方向は上から下なので）。ややこしいですねー。
参考