本節(jié)還是很基礎(chǔ)的東西，大家別急，別急，一口吃不成個(gè)胖子……

讓我們建立一個(gè)叫 myFirstApp 的項(xiàng)目，大家用不著管這個(gè) E 文是蝦米意思，照著做就行了，別打岔。文件生成完畢后如下圖所示：

生成的 MXML 內(nèi)容也不用管了，直接選擇 Design 設(shè)計(jì)視圖，就可以轉(zhuǎn)到與我們熟悉的 DW ， Flash 類(lèi)似的可視化編輯模式。如下圖所示：

如果你從來(lái)都沒(méi)有對(duì)面板布局進(jìn)行過(guò)變動(dòng)的話(huà)，那么在左下角我們可以看到組件菜單，如下圖所示：

第一個(gè) Custom 為自定義組件，也就是自己開(kāi)發(fā)或網(wǎng)上下載的組件都在這里，第二個(gè) Controls 就是我們?cè)谥?Flash 各版本里經(jīng)常看到的如 Button CheckBox之類(lèi)的常用控制組件了，第三個(gè) Layout 是排版用的組件，這個(gè)估計(jì)大家都比較新鮮，一會(huì)兒主要解說(shuō)這里，第四個(gè) Navigators 是導(dǎo)航類(lèi)組件，比如下拉菜單，頁(yè)面切換什么的，第五個(gè) Charts 是圖表組件，你需要安裝圖表插件才可以使用，官方網(wǎng)站有下載，地址自己找，偶就不提供了

我們開(kāi)始操作吧，拉一個(gè)
 Panel 組件到場(chǎng)景里來(lái)（……習(xí)慣了，雖然這里叫 state ，大家知道意思就可以了），隨便放，沒(méi)關(guān)系的，一會(huì)兒可以調(diào)整位置。然后我們可以在右邊看到各種組件屬性，如下圖所示：

Common 是普通屬性，ID 具有唯一值，不能與場(chǎng)景內(nèi)其他元素命名沖突，在這里輸入 myPanel 。Title 為標(biāo)題字樣，在這里輸入 myFirstApp 。 Horizontal 和 Vertical 是 Panel 內(nèi)元素水平及垂直居中，這個(gè)基本不用管。Style 就是樣式了。由于 Flex2 默認(rèn)字體大小是10，中文在這里使用會(huì)出現(xiàn)不清晰的現(xiàn)象，所以我們要把 Font Size 里的字體大小設(shè)置成12，也就是宋體字所能達(dá)到的清晰度最小值。其他的大家可以隨便改下看看出現(xiàn)什么情況。Style 也可用外部 CSS 文件來(lái)控制。
Layout就是排版了，absolute 是絕對(duì)定位，為默認(rèn)值，vertical 為垂直定位，horizontal 為水平定位

下面的 Constraints 是強(qiáng)制性定位，我們?cè)谶@
里使用這個(gè)來(lái)進(jìn)行排版。

選中上面和左邊中間的框后，數(shù)值輸入0，如下圖所示：

現(xiàn)在 Panel 已經(jīng)是強(qiáng)制性定位為水平及垂直居中，大家可以運(yùn)行一下看看效果，隨意放大縮小瀏覽器吧，前提是IE，F(xiàn)F似乎總會(huì)有那么些莫名其妙的毛病出現(xiàn)。
現(xiàn)在更改一下兩個(gè)0的值，就是以中心點(diǎn)來(lái)進(jìn)行偏移到當(dāng)前值位置，可為正負(fù)值。

OK ，測(cè)試完畢，現(xiàn)在我們來(lái)看其他屬性，選中四個(gè)角，然后在各個(gè)文本框里輸入200，如下圖所示：

現(xiàn)在已經(jīng)強(qiáng)制性定位為居中并距離上下左右四個(gè)方向的邊框200px 了，大家可以試試調(diào)整各個(gè)屬性，以便熟悉其具體控制的位置。MXML 代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://theartemis.cn/2006/mxml" layout="absolute">
    <mx:Panel title="MyFirstApp" id="myPanel" fontSize="12" top="200" left="200" bottom="200" right="200">
    </mx:Panel>
</mx:Application>

里面寫(xiě)得很清楚，看不懂的偶可以偷偷的告訴你這世界上存在著金山詞霸這東西，金山公司請(qǐng)付偶廣告費(fèi)，謝謝，PM 偶即可。
下面是偶一個(gè) Web 應(yīng)用里的布局，大家可以試試怎么達(dá)到這個(gè)效果：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://theartemis.cn/2006/mxml" layout="absolute">
    <mx:Panel id="top" fontSize="12" top="5" left="5" right="5" height="100" />
    <mx:HDividedBox left="5" right="5" top="115" bottom="30">
        <mx:Panel id="left" width="300" height="100%" layout="absolute" />
        <mx:Panel id="main" width="100%" height="100%" />
    </mx:HDividedBox>
    <mx:Label text="Label" left="5" right="5" bottom="2" height="22" textAlign="center"/>
</mx:Application>

下面是一個(gè)家伙的應(yīng)用……死皮賴(lài)臉的要偶幫他打廣告……不需要用戶(hù)名密碼，直接登陸即可，是用 vertical 來(lái)進(jìn)行布局的。

點(diǎn)擊訪(fǎng)問(wèn)

最后給大家附上一個(gè) FlexStyleExplorer (點(diǎn)擊下載) ，可以生成組件CSS 。