Flutter基础：Flutter的Flex布局理论以及和web的区别

Flutter的布局其实比web更简单直接，万物皆可Column与Row，这两个Flex类型组件将屏幕方方正正划分，其中Column组件让人又爱又恨，首先它让垂直方向的高度不再像web中那么难以控制，如果你在根组件中直接使用Column做最外层容器，它的默认高度就是屏幕高度，子组件又有Expanded能划分剩余空间，是不是很舒服？web中想对高度精确控制还要html,body都来个height:100%,每层组件自己定高，要划分高度不得不计算百分比。本质上因为web认为：文本水平方向排布，而元素从上到下堆砌，最终高度是所有元素换行后自然堆叠形成，人为控制垂直方向的高度不是优先选项。而Flutter加强了布局的规范，认为水平和垂直方向的布局都是同等重要的。

Column与Row都继承Flex组件，Flex布局我们早在CSS中打过交道，Flutter的Flex和CSS大同小异，本质上一样，但在一些附加能力上有差别，CSS的Flex直接百度阮一峰老师的Flex布局介绍就ok了，这里主要讲Flutter在这块的异同。

直接用Column做代表，源码中有如下解释，英文且比较长，早就看过就没必要听我归纳了，能直接阅读理解的也建议阅读源码，想轻松一点就听我在后面掰扯：

/// 1. Layout each child a null or zero flex factor (e.g., those that are not
///    [Expanded]) with unbounded vertical constraints and the incoming
///    horizontal constraints. If the [crossAxisAlignment] is
///    [CrossAxi