在這一節將向我們演示如何在Adobe Flex Builder中創建基于約束的布局。當用戶調整程序窗口時，基于約束的布局保證我們用戶界面中的組件進行自動調整。

設置我們的工程
在我們開始這一節之前，我們要先完成下面的任務：
如果我們還沒有創建工程，創建Lessons工程。
確保打開了自動構建選項。

了解Flex中的基于約束的布局
當用戶調整一個Flex程序窗口時，我們希望布局中的組件可以進行自動調整。當用戶調整程序窗口時，一個約束的布局可以調整組件的尺寸和位置。
為了創建一個基于約束的布局，我們必須使用一個容器，而這個容器的layout屬性要設置為absolute(layout="absolute")。這個屬性給了我們使用absolute位置來設置組件位置與尺寸的靈活性，同時也提供了當容器被調整時設置與移動組件的約束的能力。例如，如果我們希望當用戶將程序窗口變寬時，一個TextInput文本框可以伸展，我們可以用容器的左右邊界來界定這個控件，這樣文本框的寬度就可以用窗口的寬度來設定。
在Flex中，所有的約束都是相對于容器的邊界來設置的。他們不可以相對于其他控件進行設置。現在我們了解了基本的概念，我們可以在Flex Builder中創建一個簡單的布局并且定義約束。

插入與放置組件
創建基于約束的布局的第一步就是要在一個容器中放置組件，這個容器的layout屬性設置為absolute。這個屬性可以使得我們在這個容器中將組件拖放到任何位置。為了象素點的精度，我們可以設置X與Y坐標。
在這一節中，我們在簡單的反饋表單中插入并放置組件。

1 在瀏覽視圖中選擇Lessons工程，選擇File>New>MXML Application，創建一個名為Layout.mxml的工程。

2 將Layout.mxml文件設置為默認編譯的文件。

3 在MXML編輯器的設計模式中，通過從組件視圖中拖放組件來和Layout.mxml文件中添加一個Lable和一個TextInput控件。

4 使用鼠標將Label與TextInput控件并肩放置在從容器頂部算起60象素處。
5 在Flex屬性視圖中，擴展屬性的Common與Layout類。
出現設置common與Layout屬性的選項。

如果我們看到一個屬性表而不是前面的樣子，點擊標準視圖按鈕。
1 選擇Label控件并設置為如下的屬性：
Text: Email
X: 20
Y: 60
2 選擇TextInput控件并設置為如下的屬性：
X: 90
Y: 60
Width: 300
3 切換到MXML編輯器的代碼模式，Layout.mxml文件應包含如下的代碼：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
</mx:Application>

4 添加其余的Flex控件，如下面的代碼所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea x="90" y="90" width="300" />
<mx:Button x="330" y="150" label="Send"/>
</mx:Application>
布局預覽圖如下：

5 保存文件
Flex Builder會編譯這個程序。
6 運行程序。
程序的運行效果如下圖所示：

7 拖放瀏覽器窗口使得程序窗口變大或變小。
這些組件保持他們相對于窗口左邊與上邊的位置，但是當我們調整瀏覽器窗口時這些組件并不會伸展與壓縮。例如，當我們使得瀏覽器窗口變得更窄時，發送按鈕就會消息，而TextArea與TextInput控件也會部分消失。

下一步就是為這個布局設置約束，這樣當我們調整程序窗口時這些組件就會自動調整。
定義布局約束
在我們的布局中放置組件以后，我們定義布局約束，這樣當用戶調整程序窗口時，組件可以自動調整。
1 在MXML編輯器的設計模式中，選擇TextInput控件(EMail地址)。
2 在Flex屬性視圖時，確保了屬性的布局類。布局類包含了用于設置錨點的選項：
3 在這個視圖中通過選擇左和右錨點復選框來為TextInput控件定義布局約束，然后指定距窗口左邊90,距窗口右邊60,如下圖所示：

這兩個復選框將TextInput控件相對于窗口的左邊與右邊固定在屏幕上。與文本框相關的數字指明了控件距離窗體邊框的距離。
左邊界是固定控件所必須的，這樣當用戶水平調整程序窗口時，他會自動擴展或壓縮。如果沒有左邊界的定位，控件就會滑向左邊或是右邊。
在MXML代碼中這些約束如下進行表式：
<mx:TextInput y="60" left="90" right="60"/>
4 在編輯器的設計模式中，選擇TextInput控件，在Flex屬性視圖中，選擇四個角的復選框，并且指定如下的距離：
Left: 90
Right: 60
Top: 90
Bottom: 190
在Flex屬性視圖中，TextArea控件視圖如下：

5 選擇按鈕控件，在Flex屬性視圖中，點擊右與下錨點復選框，并且指定距右邊界為60,距下邊界為150。如下圖所示：

這兩個復選框將按鈕控件固定在窗口右下角。沒有錨點將控件相對于左邊與上邊固定，當用戶調整程序時，控件就會水平或是垂直進行移動。
6 保存文件，當編譯完成時運行程序。
程序的運行結果如下：