男のブログ俺は中卒だ。学歴なんて無くても生きていける。NativeのUI構築において、スタイル指定の基本となるのがFlexBoxだ。FlexBoxは複数の要素を縦または横に並べて配置する仕組みで、CSS3でも同様の仕組みが用意されている。FlexBoxを使えば画面幅の異なることが多いスマホやタブレットで綺麗なUIを動作させることができ、積極的にFlexBoxを使用することが公式に推奨されている。それではFlexBoxの基本的な使い方を紹介していく。コンテンツFlexを定義するflexDirectionjustifyContentflex-startcenterflex-endspace-aroundspace-betweenalignItemsflex-startflex-endcenterstretchFlexを定義するまず、親要素にFlexを定義することで、その子要素を特定の方向に整列させることができるようになる。‘row’を指定すると横方向に並べることができる。/></View>justifyContent子要素の並び方を指定するjustifyContentという属性がある。デフォルトのflex-startを含め、以下の5種類から指定できる。flex-start左上から隙間を開けずに先頭から順に並ぶ。'flex-start',}}>center中心に寄せるように要素を配置する。'center',}}>flex-endflex-startの逆で、画面下に配置される。'flex-end',}}>space-around各要素の余白が等しくなるよう均等配置される。親要素に対しても余白が設定される。'space-around',}}>space-betweenspace-aroundと違い、親要素との間に余白が生じない。'space-between',}}>alignItemsalignItemsでは、flexDirectionで指定した主軸に対し垂直方向の軸に対する要素の並び方を指定する。flexDirectionにrowを指定して主軸を横方向にした場合、縦方向の要素の並び方を決めることになる。flex-startデフォルトではflex-startの設定になっており、隙間を空けずに左上から順に並ぶ。'flex-start',}}>flex-end右下方向から並ぶ。要素の順番は変わらない。'flex-end',}}>center実際のUI構築で最も使うことの多いのがcenterだろう。要素を中央寄せに配置する。'center',}}>stretchFlexBoxの要素の軸方向の幅を指定していない場合、親要素の幅に子要素を合わせることができる。例として、flexDirectionにcolumnを指定した場合、横方向の幅を可能な限り大きくすることができる。当サイトはXserverで運営していますプロフィール中卒男15歳で熊本から単身大阪へ渡り、囲碁棋士になるための修行を積む。その後、紆余曲折ありプログラミングを学び職とする。現在プログラミングや統計、機械学習の勉強に合わせ、双子の育児に奮闘中。