【Flutter】CrossAxisAlignment｜配置の種類一覧

こんにちは、フラメルです。

今回はColumnやRowなどで使用されるCrossAxisAlignmentの使い方と種類について紹介します。

CrossAxisAlignmentとは？

CrossAxisAlignmentを使用することでColumnなら横軸、Rowなら縦軸とクロス軸における子要素の配置を指定できます。

ColumnとRowどちらも軸が変わるだけで同様に使用できます。今回はColumnを使用してCrossAxisAlignmentの種類を紹介します。

CrossAxisAlignment.start

crossAxisAlignment: CrossAxisAlignment.start

CrossAxisAlignment.startではクロス軸の開始位置に最も近い位置に要素が配置されます。

ColumnではtextDirectionでクロス軸の開始位置を指定できます。

CrossAxisAlignment.end

crossAxisAlignment: CrossAxisAlignment.center

CrossAxisAlignment.endではクロス軸の開始位置から最も離れた位置に要素が配置されます。

CrossAxisAlignment.center

crossAxisAlignment: CrossAxisAlignment.center

CrossAxisAlignment.centerでは中央に配置されます。

CrossAxisAlignment.stretch

crossAxisAlignment: CrossAxisAlignment.stretch

CrossAxisAlignment.stretchでは親要素に対して横幅いっぱいに広がります。

横幅いっぱいに広がらない場合はSizedBox(width: double.infinity)を使用します。

あわせて読みたい

【Flutter】crossAxisAlignmentが効かない時の対処法 こんにちは、フラメルです。 今回はColumnやRowなどでcrossAxisAlignmentが効かない時の対処法を紹介します。 対処法：クロス軸の横幅をいっぱいにする SizedBoxあり Si…

以上です。