Flutter 弹性布局的基石 是 flex 和 flexible。理解了这两个 widget，后面的row，column 就都轻而易举了。本文用示例的方式详细介绍 flex 的布局算法。
先布局 flex 为 0 或 null 的 child。在 main 轴上 child 受到的约束是 unbounded。如果 crossAxisAlignment 是 CrossAxisAlignment.stretch， 在 cross 轴上的约束是 tight，值是 cross 轴上收到约束的最大值。否则，在 cross 轴上的约束是 loose。
为 flex 不为 0 的 child 申请空间，flex 值越大，按比例得到的可以占用的空间越大。
为 flex 不为 0 的 child 分配空间。main 轴方向的最大值是第二步申请到的空间的值。如果 child 的fit 参数为 FlexFit.tight,child在主轴方向 受到 tight 约束，值为第二步申请到的空间的值。如果 child 的 fit 参数为 FlexFit.loose，child在主轴方向 受到 loose 约束。child在主轴方向可以任意小，但不能超第二步申请到的空间的值。
flex cross 轴的高度是能包住所有 child，并不超过最大约束。
flex main 轴的宽度与 mainAxisSize 有关。如果 mainAxisSize 是 MainAxisSize.max，main 轴的宽度是最大约束值，否则是能包住所有child ，但不超过最大约束。
flex自己的尺寸和 child 的尺寸确认后，根据 mainAxisAlignment 和 crossAxisAlignment 摆放 child。
看了算法并不直观，下面通过实例讲解。
```
Flex(
direction: Axis.horizontal,
children: [
Container(
width: 1000,
height: 100,
color: Colors.red[200],
),
],
)
我们看到，Flex 在主轴的约束是 unbounded，所以 container 可以取值 1000，超出屏幕，显示警告。
flex 值越高，可以分到的空间越大。但能否占满空间取决于 fit 参数
------------------------------------
```
Flex(
direction: Axis.horizontal,
children: [
Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),),
Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),),
Container(width: 50,height: 100,color: Colors.red[200],
),
],
)
假设宽一共 200，布局过程：
如果绿色块的 fit 值修改为 FlexFit.tight，剩下的空间就会被占满了，这个时候 width 会被忽略。
flexible 的作用就是为了修改 child 的 parentData，给 child 增加 fit, flex 布局信息。让 flex 根据这些信息为 child 布局。
class Expanded extends Flexible {
const Expanded({
super.key,
super.flex,
required super.child,
}) : super(fit: FlexFit.tight);
}
Expanded 其实就是 fit 固定为 FlexFit.tight 的 flexible。其实可以直接用 flexible 的，但因为 Expanded 太常用了，所以单独加了一个类。同时 Expanded 也更加有语义。Expanded 和 flexible 的关系就像 Center 和 Align的一样。
class Spacer extends StatelessWidget {
const Spacer({super.key, this.flex = 1})
: assert(flex != null),
assert(flex > 0);
final int flex;
@override
Widget build(BuildContext context) {
return Expanded(
flex: flex,
child: const SizedBox.shrink(),
);
}
}
Spacer 的 child 是 SizedBox.shrink()，用来占位，没有实际的意义。Spacer 是 Expanded 的包装，就是为了占空位用的。
至于摆放 child 的规则大同小异，如果有不明白的同学可以看 这篇 Flutter Wrap 图例
Flex 和 Flexible 如果都掌握了，Row 和 Colmn 自然就会了。因为 Row 只是 direction 为 Axis.horizontal 的 Flex，Column 只是 direction 为 Axis.vertical 的 Flex。
作者：IAM17
原文链接：(https://juejin.cn/post/7180962741950087224)
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。
如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取↓↓↓
