Expoのtextalign,justifycontent, alignitemsの違いとは？

Expoで開発するときに、cssで中央配置にしようとしていました。

すると、この３つの方法がありました。

あれ？この３つって何が違うんだ？？

そう思い、今回はExpoでよく使う、textalign , justifycontent , alignitems の違いについてまとめていきます。

３つの違いは何？

３つの主な違いは、次の二つです。

この２つの違いに注目して、次からの使い方を見てみましょう。

textalign の使い方

　textalign は、テキスト要素内のテキストの水平方向の配置を制御します。

textalign の値には、'left' （左揃え）、'center' （中央揃え）、'right' （右揃え）などがあります。

例えば次のように使用できます。

<Text style={{ textAlign: 'center' }}>中央揃えのテキスト</Text>

//StyleSheetでももちろんOK。

justifycontent の使い方

justifycContent は、コンテナ内の子要素の水平方向の配置を制御します。

主にViewコンポーネントに適用されます。

'justifyContent' の値には、'flex-start'（先頭揃え）、'center'（中央揃え）、'flex-end'（末尾揃え）、'space-between'（等間隔に配置）、'space-around'（周囲に等間隔で配置）などがあります。

例えば、次のように使用できます。

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>左寄せ</Text>
  <Text>中央揃え</Text>
  <Text>右寄せ</Text>
</View>

alignitems の使い方

alignItems は、コンテナ内の子要素の垂直方向の配置を制御します。

また、主にViewコンポーネントに適用されます。

alignItemsの値には、'flex-start'（先頭揃え）、'center'（中央揃え）、'flex-end'（末尾揃え）、'stretch'（伸縮させて埋める）などがあります。

例えば、次のように使用できます。

<View style={{ alignItems: 'center' }}>
  <Text>中央揃え</Text>
</View>

まとめ

これらのプロパティは、テキストやコンテンツの配置を制御するために使用されます。

textAlign はテキストの水平配置に、 justifyContent はコンテナ内の子要素の水平配置に、そして alignItems はコンテナ内の子要素の垂直配置に影響します。

それぞれがどのように動くのかあなたのアプリ内で試してみてください！では。