Flex 布局我们常用的有Column和Row, Column和Row都是继承Flex，我们以Column为例了解一下Flex的布局原理。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(color: Colors.red,width: 80, height: 80,),
          const Text(
            'You have',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          FlutterLogo(size: 100)
        ],
      ) ,
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

mainAxisAlignment

代码中的mainAxisAlignment 是Column的主轴方向上的排列参数，默认是start，从上到下排列子组件，可以设置成end、center
spaceBetween（将子组件以外的空间平均插入子组件之间）、spaceEvenly（平分子组件以外的空间、spaceAround（将子组件以外的空间平均分给每个子组件两边的空间）等排列方式

spaceAround

image.png

spaceEvenly

image.png

spaceBetween

image.png

crossAxisAlignment

crossAxisAlignment是设置交叉轴上的对齐方式，针对Column交叉轴就是横向位置，针对Row交叉轴就是纵向位置。start、center、end 分别是代表左对齐，居中对齐和居右对齐，这里稍微解释一下为什么变量名是start、end而不是left和right，因为Row 和 Column都是继承Flex，都用到了这个参数，针对Column默认start 就是从上往下排列，针对Row start就是从左往右排列， 另一个原因就是有一些国家的阅读顺序是从右往左阅读，start自然就是代表从右往左开始排列。

CrossAxisAlignment.stretch

着重说一下交叉轴stretch 参数，这个参数会把子组件会被拉伸，越大越好，这样Column或者Row也会被子组件撑大进而尺寸变大。

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.green,
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            ElevatedButton(onPressed: (){}, child: Text('')),
            ElevatedButton(onPressed: (){}, child: Text('')),
            FlutterLogo(size: 100),
            FlutterLogo(size: 100),
            FlutterLogo(size: 100)
          ],
        ),
      ) ,
      ); // This trailing comma makes auto-formatting nicer for build methods.
  }

image.png

通过上面代码的运行结果可以看出子组件button被拉伸到了最大，Column也宽度也变成了最大宽度。

mainAxisSize

mainAxisSize参数影响Column 自身的大小

MainAxisSize.min

      Column 在父级约束下尽可能的小，也就是说所以子组件的高度和

image.png

MainAxisSize.max

     Column 在父级约束下尽可能的大

image.png