flex 布局

好记性不如烂笔头。

flex的布局。
1、绝对布局。
2、约束布局（这个有点像css的相对定位）
约束布局有两种方式 a)相对于父容器 b)相对于“兄弟容器”

相对于父容器：父容器的layout的值必须是absolute。
可以使用下面的工具来完成，距离父容器四周以及中间的位置：

[img]http://dl.iteye.com/upload/attachment/0061/9561/7185041e-7b10-3cf4-97eb-9822dcfc95d4.jpg[/img]

<mx:ApplicationControlBar width="100%" height="90" dock="true" fillAlphas="[1.0, 1.0]" fillColors="[#732727, #DEC9C9]">
		<mx:Canvas width="100%" height="100%">
			<mx:Label x="0" y="0" text="Flex"/>
			<mx:Label x="0" y="41" text="GROCRE"/>
			<mx:Button label="view cart" id="btnViewCart" right="10"/>
			<mx:Button label="checkout" id="btnCheckout" right="100"/>
			<mx:Label text="(c)2006 FlexGrocre" right="10" bottom="10"/>
		</mx:Canvas>
	</mx:ApplicationControlBar>

[img]http://dl.iteye.com/upload/attachment/0061/9568/5308da88-2aa8-3b61-ad6f-c4a4babc0001.jpg[/img]

相对于“兄弟容器”：这个要复杂一点，需要建立约束列和行。如下：

<mx:constraintColumns>
		<mx:ConstraintColumn id="col1"  width="33%"/>
		<mx:ConstraintColumn id="col2"  width="33%"/>
		<mx:ConstraintColumn id="col3"  width="33%"/>
	</mx:constraintColumns>

	<mx:constraintRows>
		<mx:ConstraintRow id="row1" height="50%"/>
		<mx:ConstraintRow id="row2" height="50%"/>
	</mx:constraintRows>

把打页面分成若干个块，左右相对于colum来布局，上下根据row来布局。

<mx:TextArea id="ta1" text="text area 1"
		 fontSize="20" backgroundColor="#E4E61C" left="col1:5" right="col1:10" top="row1:10" bottom="row1:20"/>
	<mx:TextArea id="ta2" text="text area 2" fontSize="20" 
		 left="col1:5" right="col2:5" top="row2:10" bottom="row2:20" backgroundColor="#F62E1F"/>

	<mx:TextArea id="ta3" text="text area 3" fontSize="20" 
		left="col3:5" right="col3:5" top="row1:10" bottom="row2:20" backgroundColor="#3BF2F9"/>

	<mx:TextArea id="ta4" text="text area 4" fontSize="20" 
		 left="col2:5" right="col2:5" top="row1:10" bottom="row1:20" backgroundColor="#E01CE7"/>

[img]http://dl.iteye.com/upload/attachment/0061/9578/56a288a9-4b16-33fe-bc23-812c3f2fffd8.jpg[/img]

3、水平布局或者竖直布局
这两者一般都是一起使用的。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
	 fontSize="12">

	 <mx:ApplicationControlBar width="100%" height="50" dock="true">
	 	<mx:LinkButton label="按钮1" click="this.currentState=''"/>
	 	<mx:LinkButton label="按钮2" click="this.currentState='fullSales'"/>
	 	<mx:LinkButton label="按钮3" click="this.currentState='fullType'"/>
	 	<mx:LinkButton label="按钮4" click="this.currentState='fullComp'"/>
	 </mx:ApplicationControlBar>

	 <mx:Panel width="100%" height="100%" title="面板" id="sales">
	 	<mx:ControlBar>

	 	</mx:ControlBar>
	 </mx:Panel>

	 <mx:VBox width="100%" height="100%" id="rightChart">
	 	<mx:Panel title="v面板1" width="100%" height="100%" id="type">
	 	</mx:Panel>
	 	<mx:Panel title="v面板2" width="100%" height="100%" id="comp">
	 	</mx:Panel>
	 </mx:VBox>

[img]http://dl.iteye.com/upload/attachment/0061/9580/e7a342fb-bffe-394e-afc6-20b7951ad068.jpg[/img]

这些都是flex3权威上面的练习题，我一个个敲出来的。