React NativeのUI構築において、スタイル指定の基本となるのがFlexBoxだ。
FlexBoxは複数の要素を縦または横に並べて配置する仕組みで、CSS3でも同様の仕組みが用意されている。
FlexBoxを使えば画面幅の異なることが多いスマホやタブレットで綺麗なUIを動作させることができ、積極的にFlexBoxを使用することが公式に推奨されている。
それではFlexBoxの基本的な使い方を紹介していく。
コンテンツ
Flexを定義する
まず、親要素にFlexを定義することで、その子要素を特定の方向に整列させることができるようになる。
<View style={{
flex: 1,
width: '100%',
}}>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img01.jpg')}
/>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img02.jpg')}
/>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img03.jpg')}
/>
</View>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/1a6b1db3ea9d90447b516bac4a6e3497.jpg?resize=680%2C964&ssl=1)
flexDirection
デフォルトでは縦方向(column)に整列されるようになっているが、ViewのスタイルにflexDirection: ‘row’を指定すると横方向に並べることができる。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
}}>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img01.jpg')}
/>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img02.jpg')}
/>
<Image style={{ width: 64, height: 64 }}
source={require('./assets/img03.jpg')}
/>
</View>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/b4bf09e56d4f49a9722962e5542b764d.jpg?resize=660%2C950&ssl=1)
justifyContent
子要素の並び方を指定するjustifyContentという属性がある。
デフォルトのflex-startを含め、以下の5種類から指定できる。
flex-start
左上から隙間を開けずに先頭から順に並ぶ。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-start',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/1a6b1db3ea9d90447b516bac4a6e3497.jpg?resize=680%2C964&ssl=1)
center
中心に寄せるように要素を配置する。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/1ffc3fc8aad63bf71829f43997a0c885.jpg?resize=696%2C962&ssl=1)
flex-end
flex-startの逆で、画面下に配置される。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/d619c11233c16dd5d5170d5d6a680e07.jpg?resize=664%2C946&ssl=1)
space-around
各要素の余白が等しくなるよう均等配置される。
また、親要素に対しても余白が設定される。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/c92130a9e4fb8eeb5db0fc9792472a45.jpg?resize=638%2C946&ssl=1)
space-between
space-aroundと違い、親要素との間に余白が生じない。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/d07d4b8bec5b50ebeea4f4cc0dd23c42.jpg?resize=642%2C938&ssl=1)
alignItems
alignItemsでは、flexDirectionで指定した主軸に対し垂直方向の軸に対する要素の並び方を指定する。
例えばflexDirectionにrowを指定して主軸を横方向にした場合、縦方向の要素の並び方を決めることになる。
flex-start
デフォルトではflex-startの設定になっており、隙間を空けずに左上から順に並ぶ。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/1ffc3fc8aad63bf71829f43997a0c885-1.jpg?resize=696%2C962&ssl=1)
flex-end
右下方向から並ぶ。要素の順番は変わらない。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-end',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/2d533b427a1aaece0a7dfafc7fb52725.jpg?resize=652%2C944&ssl=1)
center
実際のUI構築で最も使うことの多いのがcenterだろう。
要素を中央寄せに配置する。
<View style={{
flex: 1,
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/6f42efec3327f97528ac7ceccc54c585.jpg?resize=638%2C934&ssl=1)
stretch
FlexBoxの要素の軸方向の幅を指定していない場合、親要素の幅に子要素を合わせることができる。
例として、flexDirectionにcolumnを指定した場合、横方向の幅を可能な限り大きくすることができる。
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
<View style={{height: 50, backgroundColor: 'powderblue'}} />
<View style={{height: 50, backgroundColor: 'skyblue'}} />
<View style={{height: 50, backgroundColor: 'steelblue'}} />
</View>
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2020/05/508571963d135cb1b61728367fd84e8b.jpg?resize=646%2C936&ssl=1)