【Flutter】ColumnとRowのmainAxisAlignmentとcrossAxisAlignmentの関係性

# はじめに
FlutterのcrossAxisAlignmentとmainAxisAlignmentの違いについて、ColumnとRowで実際に変更しながら確認しまとめます。参考になれば幸いです。


# 使用するもの

- Column
- Row

# Column
縦方向に並べる際に使用する。

## 基本となるコード

```dart
import 'package:flutter/material.dart';

class TopPage extends StatefulWidget {
  const TopPage({Key? key}) : super(key: key);

  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Column'),
      ),
      body: Column(
        // 以下の2つをこれから変更していく
        // mainAxisAlignment: MainAxisAlignment.start,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),

          Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),

          Container(
            width: 50,
            height: 50,
            color: Colors.green,
          ),

          Container(
            width: 25,
            height: 25,
            color: Colors.blue,
          ),

        ],
      ),
    );
  }
}
```

これを元にして処理を加えていく

## mainAxisAlignment
### start
上に寄る。

![Screenshot_1640749807.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/e8fa9edd-16c8-8435-9f5f-632f04b7d843.png)

### center
中央にくる。

![Screenshot_1640749849.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/baefd3bc-912c-fb3e-acef-1dc33b7092b1.png)

### end
下に寄る。

![Screenshot_1640749884.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/18a77d1e-71a4-b84f-00ba-1966031c0db2.png)

### spaceAround
縦方向の余白を端にも同じ分設ける。

![Screenshot_1640749914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/a9424236-f8c0-fc86-e77c-5f8793c88ede.png)

### spaceBetween
縦方向の余白を要素間のみ均等に設ける。

![Screenshot_1640749953.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/9bf33794-8ba6-a5a7-eb6f-346e6e1620e2.png)

### spaceEvenly
縦方向の余白を全て同じ分設ける。

![Screenshot_1640749990.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/5fc9c668-3fd0-4a7e-5fb5-3f5287882c71.png)

## crossAxisAlignment
### start
左に寄る。

![Screenshot_1640750406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/90a010b8-804b-9cca-a8c1-a09156cc6114.png)

### center
中央にくる。

![Screenshot_1640750429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/501d4e02-c48e-25b5-9888-a5697ca51a8e.png)

### end
右に寄る。

![Screenshot_1640750456.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/20173ea1-01e5-3367-74fa-a3db0ad192f4.png)

### stretch
要素が画面横方向に伸びる。

![Screenshot_1640750485.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/af238eb0-e4c3-3bf9-6aa4-e8cd673be6d8.png)


# Row
横方向に並べる際に使用する。

## 基本となるコード
```dart
class _TopPageState extends State<TopPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Row'),
      ),
      body: Row(
        // 以下の2つをこれから変更していく
        // mainAxisAlignment: MainAxisAlignment.start,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 150,
            height: 150,
            color: Colors.red,
          ),

          Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),

          Container(
            width: 50,
            height: 50,
            color: Colors.green,
          ),

          Container(
            width: 25,
            height: 25,
            color: Colors.blue,
          ),

        ],
      ),
    );
  }
}
```
これを元にして処理を加えていく

## mainAxisAlignment
### start
左に寄る。
![Screenshot_1640750943.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/504eaac1-d1c8-677d-29a4-d63fb720d0b3.png)


### center
中央にくる。
![Screenshot_1640750969.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/7a73b838-e1e5-1b9c-f98f-0e5d2113596a.png)


### end
右に寄る。
![Screenshot_1640750991.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/00a98bf0-53e5-2400-ab62-c3fb4b03fa58.png)

### spaceAround
横方向の余白を端にも同じ分設ける。
![Screenshot_1640751017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/38208380-0d14-b34c-0583-4d6a40c70711.png)


### spaceBetween
横方向の余白を要素間のみ均等に設ける。
![Screenshot_1640751074.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/3981ed47-6b53-1dd1-b442-548b9403ce9b.png)


### spaceEvenly
縦方向の余白を全て同じ分設ける。
![Screenshot_1640751103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/18717997-d336-90ad-7f65-8d7ca2e6440f.png)


## crossAxisAlignment
### start
上に寄る。
![Screenshot_1640751130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/aac281fd-a9e4-2574-46ef-a4df34df1b01.png)

### center
中央にくる。
![Screenshot_1640751163.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/a28640e5-c6ef-14ac-49f0-962cc260a7be.png)

### end
下に寄る。
![Screenshot_1640751176.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/d2e47af2-13f6-b966-51da-6691344176b5.png)

### stretch
要素が画面縦方向に伸びる。
![Screenshot_1640751197.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/7997d5e8-7839-5128-fde4-443683274379.png)


# まとめ
- mainAxisAlignment
    - それぞれの方向に影響を与える
- crossAxisAlignment
    - 縦横反対の方向に影響を与える


# おわりに
きちんと認識出来ていなかった部分があったので良い確認になりました！

ここまで読んでいただき、ありがとうございました。
何かありましたらコメントをお願いします。