MENU

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

2019 10/12
【備忘録】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のスタイル方法を学ばないといけないなと感じました。

- 3ヶ月でエンジニア転職を目指そう -

  • 解決できないエラーに心が折れた
  • 転職に必要なレベルがわからない
  • 本当に今の学習で転職できるか不安

そんな悩みを持っている人に

現役エンジニアが教える3ヶ月でエンジニア転職を実現する方法

を解説しています。

コメント

コメントする

目次
閉じる