【Flutter】MainAxisAlignmentの使い方｜配置の種類一覧

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

MainAxisAlignmentとは？

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

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

MainAxisAlignment.start

mainAxisAlignment: MainAxisAlignment.start

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

ColumnではverticalDirectionで主軸の開始位置を指定できます。

MainAxisAlignment.center

mainAxisAlignment: MainAxisAlignment.center

MainAxisAlignment.centerでは主軸の中央に要素が配置されます。

MainAxisAlignment.end

mainAxisAlignment: MainAxisAlignment.end

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

MainAxisAlignment.spaceAround

mainAxisAlignment: MainAxisAlignment.spaceAround

MainAxisAlignment.spaceAroundでは主軸において全要素の周りに同幅の余白が作られます。

MainAxisAlignment.spaceBetween

mainAxisAlignment: MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceBetweenでは主軸において要素間に同幅の余白が作られます。

MainAxisAlignment.spaceEvenly

mainAxisAlignment: MainAxisAlignment.spaceEvenly

MainAxisAlignment.spaceEvenlyでは主軸において要素間・1つ目の要素の手前・最後の要素の後に同幅の余白が作られます。

以上です。