Flex 学习笔记 之 flex 页面布局

1. 两种 Positioning

 

Absolute Positioning  and Relative Positioning

类似于css的固定布局和流式布局

 

2.maxHeight maxWidth

    minHeight minWidth

从字面上理解就好

 

3.paddingLeft, paddingRight,
paddingTop, and paddingBottom

 

类似于css的内补丁(到父亲元素的距离)

 

4. horizontalGap(横间距)

    varticalGap(纵间距)

 

5. Form

 

<mx:Form id="main">
  <mx:FormItem label="Account Number"><mx:TextInput id="accountNumber"></mx:TextInput></mx:FormItem>
  <mx:FormItem label="Password"><mx:TextInput id="password"></mx:TextInput></mx:FormItem> 
  <mx:FormItem direction="horizontal"><mx:Button label="reset" click="reset()"></mx:Button><mx:Button label="submit" click="sendRequest()"></mx:Button>  </mx:FormItem>
 </mx:Form>

 

6. Spacer

 

<mx:HBox width="250">
<mx:Button label="Left"/>
<mx:Spacer width="100%"/>
<mx:Button label="Right"/>
</mx:HBox>

 

7. HRule and VRule   横间线 纵间隔线

 

8.  horizontalAlign   varticalAlign

 

<mx:VBox
width="400"
height="400"
horizontalAlign="center">
<mx:Button label="Button"/>
<mx:Button label="Button"/>
<mx:Button label="Button"/>
</mx:VBox>

 

9. 锁定布局

<mx:Button label="Button" right="5" bottom="5" />

 

把元素锁定在右下脚