［Flutter］ MainAxisAlignment と CrossAxisAlignment  の利用方法

# はじめに

`Flutter`の`row`と`column`の子要素の並び、つまりアライメントは
`MainAxisAlignment`と`CrossAxisAlignment`にて変更できるようになっています。
これらの動作ですがわりと忘れてしまうのでチートシートという形でまとめておきたいと思います。

| ![8kHBpNGo-clipboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/495d38a3-9290-dff5-91b8-625ffce58651.png) | ![5C6ZEv9P-clipboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/2eed29cf-be36-032b-4319-8438bb9efee3.png) | 
| --- | --- |


# MainAxisAligment

`MainAxisAligment` では次の種別でアライメントを変更できる。

| 種別 | 内容 |
| --- | --- |
| center | 中央寄せになる |
| start | `Row`なら左寄せ、`Column`なら上寄せになる | 
| end | `Row`なら右寄せ、`Column`なら下寄せになる |
| spaceAround | 先頭の子要素の前、末尾の子要素の後にスペースを空ける、<br>また子要素の間に均等なスペースを空ける。<br>これらの2つのスペースのサイズは異なる。  | 
| spaceBetween | 子要素の間に均等なスペースを空ける |
| spaceEvenly | 先頭の子要素の前、末尾の子要素の後、<br>または子要素の間に均等なスペース空ける。<br>spaceAroundと違い全てのスペースが均等になる。  |

## Row

### スクリーンショット
![Screenshot_1578120265.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/79815034-9005-bdb7-fe79-26f6b9e02e6b.png)


### ソースコード
```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('start1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('start2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('start3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('center1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('center2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('center3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('end1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly3', style: TextStyle(fontSize: 15))),
            ]),
          ],
        ),
      ),
    );
  }
```
## Column

### スクリーンショット

![Screenshot_1578120076.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/91a35550-7994-d7d9-b533-bf3f3a783db5.png)

### ソースコード
```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('start1', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('start2', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('start3', style: TextStyle(fontSize: 15))),
                ]),
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('center1', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('center2', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('center3', style: TextStyle(fontSize: 15))),
                ]),
            Column(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('end1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child:  Text('end2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
            ]),
            Column(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround3', style: TextStyle(fontSize: 15))),
            ]),
            Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween1',
                          style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween2',
                          style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween3',
                          style: TextStyle(fontSize: 15))),
                ]),
            Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly3', style: TextStyle(fontSize: 15))),
            ]),
          ],
        ),
      ),
    );
  }
```

# CrossAxisAlignment

`CrossAxisAlignment` では次の種別でアライメントを変更できる。

| 種別 | 内容 |
| --- | --- |
| baseline | テキストのベースラインを揃えるように配置される |
| center | 中央寄せになる |
| start | `Column`なら左寄せ（厳密には`TextDirection`によって開始位置が決まる）<br>`Row`なら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる) | 
| end | `Column`なら右寄せ（厳密には`TextDirection`によって開始位置が決まる）<br>`Row`なら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる)  | 
| stretch | 子要素の幅また高さを埋めるように配置する |

## Row

### スクリーンショット

![Screenshot_1578119352.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/d50ffa46-fbf5-9782-a222-0403ca7c7a00.png)


### ソースコード

```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('center1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('center2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('center3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('start1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('start2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('start3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('end1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('end2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('end3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('stretch1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('stretch2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('stretch3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('baseline1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('baseline2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('baseline3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
          ],
        ),
      ),
    );
  }
```

## Column

### スクリーンショット

![Screenshot_1578119439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/98681402-cd5d-62b9-9be0-d95ef3716817.png)


### ソースコード

```dart
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('center1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('center2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('center3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('start1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('start2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('start3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('end1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('end2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('end3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('stretch1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('stretch2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('stretch3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('baseline1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('baseline2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('baseline3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
          ],
        ),
      ),
    );
  }
```
# おわりに

初めて`Flutter`を触ると、Axisに関してしっくりこない感じがありました。
ですがこのようにしっかり噛み砕いて理解すればものすごくわかりやすいですね。

<a href="https://github.com/kaleidot725/flutter-lab/tree/master/axis_layout"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/5dcfd2a9-44f3-16b2-0add-8c1094c39f89.png" height=125/></a>

# 参考文献

- [MainAxisAlignment enum](https://api.flutter.dev/flutter/rendering/MainAxisAlignment-class.html)
- [CrossAxisAlignment enum](https://api.flutter.dev/flutter/rendering/CrossAxisAlignment-class.html)