flutter 布局熟悉flex之后绘制普通UI基本都能解决。

flex是一种弹性布局允许子控件按照一定比例来分配父容器空间。弹性布局的概念在其他UI系统之中也有存在，如微信小程序，和小程序中flex属性基本相似。

Flex组件中的子控件沿着水平或垂直方向排列（row和column）

在flex布局中有主轴和交叉轴的概念，子组件在主轴的方向排成一行：如

• row：
  

• column：
  用来控制子控件在主轴和交叉轴显示的属性MainAxisAlignment 和CrossAxisAlignment

MainAxisAlignment： start、end、center、spaceBetween、spaceAround、spaceEvenly
CrossAxisAlignment：start、end、center、baseline、stretch

默认 mainAxisAlignment 为start、 crossAxisAlignment为center

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

//spaceBetween 这个属性也较为常用，使中间的各个子控件间距相等、首尾没有空隙
Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

//spaceAround  使中间的各个子控件间距相等、首尾间距为中间间距的一半
Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )

//spaceEvenly  使中间的各个子控件间距相等
 Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(color: Colors.red),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.green),
              height: 100,
              width: 100,
            ),
            Container(
              decoration: BoxDecoration(color: Colors.amber),
              height: 50,
              width: 50,
            )
          ],
        ),
      )