flex
画面いっぱいにコンポーネントを表示する。
同レベルで他のコンポーネントもこれを指定していた場合、指定した数値によって表示比率が変わる。
flexDirection
コンポーネントの並びの向きを設定する。
| キーワード | 内容 |
|---|---|
| row | 縦並び |
| column (default) | 横並び |
flexWrap
並べた要素が画面からはみ出た時の振る舞いの設定。
| キーワード | 内容 |
|---|---|
| nowrap (default) | はみ出ても一行で表示する。 |
| wrap | はみ出たら折り返す。 |
justifyContent
子コンポーネントの配置方法を指定する。
| キーワード | 内容 |
|---|---|
| flex-start (default) | 縦並びの場合は上から、横並びの場合は左から配置していく。 |
| flex-end | 縦並びの場合は下から、横並びの場合は右から配置していく。 |
| center | 中央に揃えて配置していく。 |
| space-between | 両端を基準に、子コンポーネントを均一に配置する。 |
| space-around | 子コンポーネントを均一に配置する。 |
alignItems, alignSelf
alignItemsは子コンポーネントの配置方法を指定する。
alignSelfは親の指定した配置方法を上書きできる。
| キーワード | 内容 |
|---|---|
| stretch (default) | コンポーネントを表示範囲に伸ばして配置する。 |
| flex-start | 縦並びの場合は左から、横並びの場合は上から配置していく。 |
| flex-end | 縦並びの場合は右から、横並びの場合は下から配置していく。 |
| center | 中央に揃えて配置していく。 |