本文和大家重點(diǎn)討論一下Flex布局規(guī)則，主要包括VBox布局，HBox布局，Canvas布局等八種布局規(guī)則，相信通過(guò)本文的簡(jiǎn)單描述，你對(duì)Flex布局規(guī)則有深刻的認(rèn)識(shí)。

Flex布局規(guī)則

1)VBox

子元素沿垂直方向排列；每個(gè)子元素都繪制在前一標(biāo)簽的下方

(2)HBox

子元素沿水平方向排列；每個(gè)子元素都繪制在前一標(biāo)簽的右方

(3)Canvas

Flex布局規(guī)則中按開(kāi)發(fā)者指定的x坐標(biāo)和y坐標(biāo)繪制子元素。如果沒(méi)有指定坐標(biāo)，則所有的子元素都繪制在容器的左上角。例如，如果在Canvas容器中添加一個(gè)Button控件而不給Button控件指定x坐標(biāo)和y坐標(biāo)，那么按鈕會(huì)被呈現(xiàn)在Canvas的左上角，位于默認(rèn)的(0,0)位置。

(4)Application

通過(guò)使用Layout屬性，Application布局能設(shè)置成類似VBox、HBox或Canvas容器之中的任何一種方式

(5)Tile

將其子元素排成一個(gè)或多個(gè)豎列或橫行，在需要時(shí)增加新行或新列。所有的Tile容器單元格大小都相同。Flex將Tile容器的單元格排在正方形網(wǎng)格中，每一個(gè)單元格內(nèi)放入一個(gè)子元素。布局方式由direction屬性決定。

(6)Panel

Flex布局規(guī)則中Box容器的子類，Panel容器可以像VBox、HBox或Canvas容器之中的任何一種那樣布局，這取決于指定的Layout屬性（默認(rèn)使用layout="absolute"，布局行為與Canvas容器一樣）。除了可以包含子元素，Panel容器還白日做夢(mèng)了標(biāo)題欄區(qū)域，可以包含它的標(biāo)題和狀態(tài)信息。

(7)ControlBar

ControlBar容器可用于將工具欄停靠在Panel容器或TitleWindow容器的底部。ControlBar容器能以HBox容器或VBox容器的方式布局，這取決于direction屬性（默認(rèn)值是horizontal）

(8)ApplicationControlBar

ApplicationControlBar容器用于放置在整個(gè)應(yīng)用程序中均能訪問(wèn)的組件。如果ApplicationControlBar容器是<mx:Application>標(biāo)簽的***個(gè)子元素，且dock屬性為true，剛ApplicationControlBar容器會(huì)?？吭趹?yīng)用程序繪制區(qū)域的頂部，占滿應(yīng)用程序的***寬度，而且不能隨應(yīng)用程序滾動(dòng)而滾動(dòng)。ApplicationControlBar容器能以HBox容器或VBox容器的方式布局，這取決于direction屬性（默認(rèn)值是horizontal）

【編輯推薦】

1. Flex基礎(chǔ) Flex布局學(xué)習(xí)手冊(cè)
2. Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
3. 解析Flex布局容器的使用
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件