flex画表格实例

 

样式：
mx|Grid
{
	borderStyle: solid;
	letterSpacing:0;
	horizontalGap:-1;
	verticalGap:-1;
	paddingLeft:-1;
	paddingTop:-1;
	paddingRight:-1;
	paddingBottom:-1;
}
mx|GridItem{
	borderStyle: solid;
	horizontalAlign: center;
	verticalAlign: middle;
	paddingTop:-1;
	paddingBottom:-1;
	
}

//具体代码
<mx:Grid width="100%" >
			<mx:GridRow width="100%" height="30">
				<mx:GridItem width="100%" horizontalAlign="right" paddingRight="30">
					<s:Label text="账户余额："/>
				</mx:GridItem>
				<mx:GridItem width="100%" horizontalAlign="left" paddingLeft="30">
					<s:Label text="{currentAccount.balance}"/>
					<s:Label text="元"/>
				</mx:GridItem>
			</mx:GridRow>
			<mx:GridRow width="100%" height="30">
				<mx:GridItem width="100%" horizontalAlign="right" paddingRight="30">
					<s:Label text="可用余额："/>
					
				</mx:GridItem>
				<mx:GridItem width="100%" horizontalAlign="left" paddingLeft="30">
					<s:Label text="{currentAccount.balance}"/>
					<s:Label text="元"/>
				</mx:GridItem>
			</mx:GridRow>
			<mx:GridRow width="100%" height="30">
				<mx:GridItem width="100%" horizontalAlign="right" paddingRight="30">
					<s:Label text="您最近一次支付记录："/>
					
				</mx:GridItem>
				<mx:GridItem width="100%" horizontalAlign="left" paddingLeft="30">
					<s:Label  text="{dateFormat.format(tradeHistory.dealTime)} {tradeHistory.description}"/>
				</mx:GridItem>
			</mx:GridRow>
			<mx:GridRow width="100%" height="30">
				<mx:GridItem width="100%" horizontalAlign="right" paddingRight="30">
					<s:Label text="您最近一次充值记录："/>
					
				</mx:GridItem>
				<mx:GridItem width="100%" horizontalAlign="left" paddingLeft="30">
					<s:Label  text="{rechargeHistory ? dateFormat.format(rechargeHistory.dealTime)+','+rechargeHistory.description: '您还没有使用过余额支付!'}"/>
				</mx:GridItem>
			</mx:GridRow>
		</mx:Grid>