flex

画面いっぱいにコンポーネントを表示する。
同レベルで他のコンポーネントもこれを指定していた場合、指定した数値によって表示比率が変わる。

flexDirection

コンポーネントの並びの向きを設定する。

キーワード	内容
row	縦並び
column (default)	横並び

並べた要素が画面からはみ出た時の振る舞いの設定。

キーワード	内容
nowrap (default)	はみ出ても一行で表示する。
wrap	はみ出たら折り返す。

子コンポーネントの配置方法を指定する。

キーワード	内容
flex-start (default)	縦並びの場合は上から、横並びの場合は左から配置していく。
flex-end	縦並びの場合は下から、横並びの場合は右から配置していく。
center	中央に揃えて配置していく。
space-between	両端を基準に、子コンポーネントを均一に配置する。
space-around	子コンポーネントを均一に配置する。

alignItemsは子コンポーネントの配置方法を指定する。
alignSelfは親の指定した配置方法を上書きできる。

キーワード	内容
stretch (default)	コンポーネントを表示範囲に伸ばして配置する。
flex-start	縦並びの場合は左から、横並びの場合は上から配置していく。
flex-end	縦並びの場合は右から、横並びの場合は下から配置していく。
center	中央に揃えて配置していく。