Flutterでコードを書いている際に、crossAxisAlignmentとmainAxisAlignmentの違いに戸惑ったため調べました。
注意点: crossAxisAlignmentとmainAxisAlignmentの向きは場合によって変化する
具体的に言うと、Rowクラスでラップするか、Columnクラスでラップするかで意味が変わります。
Rowクラスでラップする場合
メインの向きは Row = 横方向なので、上記の図のようになります。
したがって、
mainAxisAlignment = 水平方向
crossAxisAlignment = 垂直方向
crossAxisAlignment = 垂直方向
となります。
Columnクラスでラップする場合
メインの向きは Column = 縦方向なので、上記の図のようになります。
したがって、
mainAxisAlignment = 垂直方向
crossAxisAlignment = 水平方向
crossAxisAlignment = 水平方向
となります。
メインの向き(主軸)によって変化するということですね。
Attention Required! | Cloudflare
![](https://yaba-blog.com/wp-content/uploads/cocoon-resources/blog-card-cache/573ba2601a84f8fc3ebc69aa3622ef30.png)
Layouts in Flutter
Learn how Flutter's layout mechanism works and how to build a layout.
日本語でFlutterの概要を知るなら以下の書籍がオススメです。
コメント