假设你已经掌握了flutter的一些基础知识，比如环境搭建，简单的dart语法，及flutter组件化思想。那么你适合阅读本篇教程，本教程演示一些flutter中的flex用法的简单示例.
在不懂height: 170.0,width:100.0如何适配不同分辨率的时候，只能用flex搞事情，所以咱看看flex如何在flutter中搞事情。
先看效果图：
分析一下需求：
整个布局最外层是一个Row，左边是一个Column里面再嵌套一个Row，代码实现如下：
import 'package:flutter/material.dart';class FluterFlex extends StatelessWidget { @override Widget build(BuildContext context){ return new Center( child: new Row( children: [ new Column( children: [ new Text( "为什么说Flutter是革命性的1", style: new TextStyle( fontSize: 18.0 ), ), new Row( children: [ new Text( '央视网', ), new Text( '2018-03-11', ), ], ), ], ), new Image.asset( 'images/head.jpg', height: 100.0, fit: BoxFit.cover, ), ], ), ); }}复制代码 这只是纯组件代码，还没有添加任何样式
最外层的Row，有2个子组件,它们主轴为水平方向，起点为左端，和flex的flex-direction: row同样效果,子组件的对齐方式为两端对齐,flex代码为 justify-content： space-between。
然后左侧布局为Column，主轴方向为垂直方向，两个子组件的布局方式为两端对齐，flex代码为： justify-content：space-between。
左侧底部同理。在flutter如果实现呢，代码如下：
import 'package:flutter/material.dart';class FluterFlex extends StatelessWidget { @override Widget build(BuildContext context){ return new Center( child:new Container( height: 120.0, padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding decoration: new BoxDecoration( border:new Border.all(//新手建议给每一个组件写一个border color:const Color(0xff6d9eeb), ) ), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐 children: [ new Expanded( flex:2,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3 child: new Column( crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点 mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件在主轴的排列方式为两端对齐 children: [ new Container( padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding decoration: new BoxDecoration( border:new Border.all( color:const Color(0xff6d999b), ) ), child:new Text( "为什么说Flutter是革命性的", style: new TextStyle( fontSize: 18.0 ), ), ), new Container( padding:const EdgeInsets.only(right:13.0,bottom:15.0), decoration: new BoxDecoration( border:new Border.all( color:const Color(0xff6d999b), ) ), child:new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件在主轴的排列方式为两端对齐 children: [ new Text( '央视网', ), new Text( '2018-03-11', ), ], ) ), ], ), ), new Expanded( flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据1/3 child: new Image.asset(//本地图片加载，需在pubspec.yaml配置 'images/head.jpg', height: 100.0, fit: BoxFit.cover, ), ), ], ), ), ); }}复制代码 效果如图：
在上面代码中，还添加了一些其他样式，并且给每一个组件都加了border，这样便于新手布局。我们把多余的代码删掉然后稍作改进，完整代码如下：
import 'package:flutter/material.dart';class FluterFlex extends StatelessWidget { @override Widget build(BuildContext context){ return new Center( child:new Container( height: 120.0, padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding decoration: new BoxDecoration( border:new Border( bottom: new BorderSide(width: 1.0,color:const Color(0xff999999)) // color:const Color(0xff6d9eeb), ) ), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐 children: [ new Expanded( flex:2,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3 child: new Column( crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点 mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件的排列方式为主轴两端对齐 children: [ new Container( padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding child:new Text( "为什么说Flutter是革命性的", style: new TextStyle( fontSize: 18.0 ), ), ), new Container( padding:const EdgeInsets.only(right:13.0,bottom:15.0), child:new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐 children: [ new Text( '央视网', ), new Text( '2018-03-11', ), ], ) ), ], ), ), new Expanded( flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据1/3 child: new Image.asset(//本地图片加载，需在pubspec.yaml配置 'images/head.jpg', height: 100.0, fit: BoxFit.cover, ), ), ], ), ), ); }}复制代码 代码都是参考官网英文文档撸的，但是本人是英语渣，所以如果有不对的地方，欢迎大家指正！