【備忘録】flexboxのalignItemsが効かないときの対処

react nativeでは、styleを基本的にflexboxで指定する必要があります。

flexboxは、スマホのように多種多様なディスプレイが存在する環境において非常に強力な武器となりますが、初学者にとっては混乱を引き起こすことも少なくないと感じます。

その中で今回、flexboxのalign-itemsで少しハマったのでメモを残しておきます。

flexboxとは

flexboxはcssで複数の要素を並べるときに簡単にきれいに並べてくれます。

どのような挙動があるのか、詳しくはこちらのページを参考にしていただきたいのですが、何pxといった特定の値を指定しなくても要素を上下中央に寄せたり、要素の折返しや等間隔で並べるといった動作を実現してくれます。

今回は、縦方向に要素を等間隔で並べるといったことをしており、align-itemsをspace-betweenで並べることによって実現しようとしたのですが、想像と違う挙動になったので備忘録としてまとめています。

alignItemsが効かなかった理由

結果的に非常に単純な理由だったのですが、align-itemsはあくまで複数行に要素がまたがっているときに効果を発揮します。

しかし、flex-direction: columnのようにflexboxの子要素を縦方向にするだけでは、align-itemsは動作しません。

これを想定通りの挙動をさせるためには、align-itemsではなく、子要素の横並びを調整するjustify-contentを使用する必要があり、今回のケースでいえばjustify-content: space-betweenで解決されました。

まとめ

知識がないとほんのちょっとしたことでもつまづいてしまいますね。

スマホアプリを作っていくにあたって、もう少しflexboxのスタイル方法を学ばないといけないなと感じました。

SNSでもご購読できます。

コメントを残す

*