【Flutterレイアウト解説】MainAxisAlignmentとCrossAxisAlignmentの違いと使い方
Flutter
Nicolas Christopher
2025年02月13日
はじめに
こんにちは、株式会社メンバーズCross Application
カンパニーのニコラスです。
Flutterでは複数のWidgetを並べるためによくRowとColumnを使います。子Widgetの配置を調整しようとする時に、MainAxisAlignmentとCrossAxisAlignmentを使ったことがありますか？普段よく使っているのに実はちゃんと理解していない人が多いのではないでしょうか？
この記事では、MainAxisAlignmentとCrossAxisAlignmentの違いを説明し、実際のコードの例を紹介したいと思います。
この記事を通じてMainAxisAlignmentとCrossAxisAligmentを完璧に理解しましょう！
MainAxisAligmentとは
Mainがキーワードになります。MainAxisAlignmentとは子Widgetの軸の並び方向の配置のことです。
- Column＝縦並び
- Row＝横並び
なので以下のようになります。
 |  |
|---|
CrossAxisAligmentとは
Crossがキーワードになります。CrossAxisAligmentとは子Widgetの軸の並び方向ではない配置のことです。
- Column＝縦並び
- Row＝横並び
なので以下のようになります。
 |  |
|---|
Alignmentの種類
Alignment（整列）の種類を以下の表にまとめました。
Alignment | 種類 | Column | Row |
|---|---|---|---|
MainAxis | center | 中央寄せ | 中央寄せ |
end | 下寄せ | 右寄せ | |
spaceAround | 全ての子Widgetの間に スペースを空けるが、 先頭子Widgetの前 と末尾子Widgetの後の スペースは他の子Widget の半分 | 全ての子Widgetの間に スペースを空けるが、 先頭子Widgetの前 と末尾子Widgetの後の スペースは他の子Widget の半分 | |
spaceBetween | 先頭と末尾の子Widget 以外、子Widgetの間に 均等なスペースを空ける | 先頭と末尾の子Widget 以外、子Widgetの間に 均等なスペースを空ける | |
spaceEvenly | 先頭と末尾の子Widget も含め、均等なスペース を空ける | 先頭と末尾の子Widget も含め、均等なスペース を空ける | |
start | 上寄せ | 左寄せ | |
CrossAxis | baseline | 左寄せ | ベースラインで揃える |
center | 中央寄せ | 中央寄せ | |
end | 右寄せ | 下寄せ | |
start | 左寄せ | 上寄せ | |
stretch | 高さを埋める | 幅を埋める |
コードの例
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MainAxisALigntment.center'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
],
),
),
);
} |
|---|
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MainAxisALigntment.spaceBetween'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
],
),
),
);
} |
|---|
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CrossAxisAlignment.stretch'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
Container(color: Colors.orange, width: 50, height: 50,),
],
),
),
],
),
),
);
} |
|---|
上記以外のパターンは上記のコードをコピーして、ご自身で確認してみてください！
まとめ
MainAxisAlignmentとCrossAxisAlignmentの違いを理解できましたか？
Flutterを書き始めた当初、MainAxisAlignmentとCrossAxisAlignmentをしっかり理解しないままUIの実装をしようとした時に、意外とWidgetの配置に時間がかかってしまいました。その経験から、MainAxisAlignmentとCrossAxisAlignmentの理解はUI実装において欠かせないものだと感じています。皆さんも、完璧に理解できるまでにいろんなパターンを試してみてください！
この記事を書いた人
Advent Calendar!
Advent Calendar 2024開催中！
