React Nativeでは、基本的にstyleをflexboxで指定する必要があります。
flexbox は、スマホのように多種多様なディスプレイが存在する環境において非常に強力な武器となりますが、初学者にとっては混乱を引き起こすことも少なくないと感じます。
その中で今回、flexbox の align-items で少しハマったのでメモを残しておきます。
flexboxとは
flexbox はCSSで複数の要素を並べるときに簡単にきれいに並べてくれます。
どのような挙動があるのか、詳しくはこちらのページを参考にしていただきたいのですが、何pxといった特定の値を指定しなくても要素を上下中央に寄せたり、要素の折返しや等間隔で並べるといった動作を実現してくれます。
今回は、縦方向に要素を等間隔で並べるといったことをしており、align-items を space-between で並べることによって実現しようとしたのですが、想像と違う挙動になったので備忘録としてまとめています。
align-itemsが効かなかった理由
結果的に非常に単純な理由だったのですが、align-items はあくまで複数行に要素がまたがっているときに効果を発揮します。
しかし、flex-direction: column;のようにflexboxの子要素を縦方向にするだけでは、align-items は動作しません。
これを想定通りの挙動をさせるためには、align-items ではなく、子要素の横並びを調整する justify-content を使用する必要があり、今回のケースでいえばjustify-content: space-between;で解決されました。
justify-content については、以下の記事で詳しく紹介されています。
» justify-content – CSS: カスケーディングスタイルシート | MDN
まとめ
知識がないとほんのちょっとしたことでもつまづいてしまいますね。
スマホアプリを作っていくにあたって、もう少しflexboxのスタイル方法を学ばないといけないなと感じました。