Flex mx:Grid的调整心得

主程序中mx:Grid代码:

<mx:Grid minWidth="500" >
   <mx:GridRow height="25" >
      <mx:GridItem styleName="titleGridItem" colSpan="3">
         <s:Label text="网络编号" />
	<s:TextInput width="250" id="WGBH" />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem" colSpan="2">
	<s:Label text="所属街道" />
	<s:TextInput width="250" id="SSJD" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="街道代码" />
	<s:TextInput width="80" id="JDDM"  />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="街道领导" />
	<s:TextInput width="80" id="JDLD" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="电话1" />
	<s:TextInput width="80" id="JDLDDH"  />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="    电话2" />
	<s:TextInput width="80" id="JDLDD2"  />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem" colSpan="2">
	<s:Label text="所属社区" />
	<s:TextInput width="250" id="SSSQ" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="社区代码" />
	<s:TextInput width="80" id="SQDM" />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="社区主任" />
	<s:TextInput width="80" id="SQZR" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="电话1" />
	<s:TextInput width="80" id="SQZRDH" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="    电话2" />
	<s:TextInput width="80" id="SQZRD2" />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="社区专干" />
	<s:TextInput width="80" id="SQZG" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="电话1" />
	<s:TextInput width="80" id="SQZGDH" />
      </mx:GridItem>
      <mx:GridItem styleName="contentGridItem">
	<s:Label text="    电话2" />
	<s:TextInput width="80" id="SQZGD2" />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem" colSpan="3">
	<s:Label text="国际代码" />
	<s:TextInput width="80" id="GBDM" />
      </mx:GridItem>
   </mx:GridRow>
		
   <mx:GridRow height="25">
      <mx:GridItem styleName="contentGridItem" colSpan="3">
	<s:Label text="    备注" />
	<s:TextInput width="450" id="BZ" />
      </mx:GridItem>
   </mx:GridRow>
		
</mx:Grid>

CSS:

gridEdit|GridInfoRenderer s|Label{
	fontSize:12;
	fontFamily:微软雅黑;
	textAlign:center;
	color:#2E80CA;
}

gridEdit|GridInfoRenderer s|TextInput{
	fontFamily:微软雅黑;
	fontSize:12;
	borderAlpha:0;
	borderVisible:false;
	contentBackgroundAlpha:0;
	focusAlpha:0;
	color:#7C7C7C;
}

gridEdit|GridInfoRenderer mx|Grid{
	borderColor:#EAEEF1;
	borderStyle:solid;
	horizontalGap:1;
	verticalGap:-1;
	backgroundColor:#EAEEF1;
	
}

gridEdit|GridInfoRenderer mx|GridRow{
	borderStyle:solid;
	borderColor:#EAEEF1;
	borderVisible:true;
	
}

gridEdit|GridInfoRenderer .titleGridItem{
	horizontalAlign:left;
	backgroundColor:#EAEEF1;
	verticalAlign:middle;
	paddingLeft:10;
	paddingRight:10;
}

gridEdit|GridInfoRenderer .contentGridItem{
	horizontalAlign:left;
	backgroundColor:#FFFFFF;
	verticalAlign:middle;
	paddingLeft:10;
	paddingRight:10;
}