Flex布局怎么用

這篇文章給大家分享的是有關Flex布局怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Flex布局基礎

對于Flex 初學者，在Hello World之后，Flex布局便是下一站學習要的要義。若是從傳統的Html轉變而來，總希望找到類似于Div/Table/UL等之類的控件，也希望在Flex中可以像Dreamweaver一樣可以拖拽控件；而如果是從Windows Application程序轉變而來，則可能更喜歡Absolute布局，讓控件散落于頁面之上，通過x/y控制其坐標。這種做法讓Html設計師覺得可笑，但我見過有人確實用VS這么做過。

喜歡Div的朋友，可能覺得Box很親切；喜歡用Table的設計師，對不起，Flex沒有Table，Grid雖與之極像，但不宜用來布局；Application程序員也不要圖行事，使用Absolute布局，這種布局不宜開發Web應用，如果只是開發桌面版則無關緊要。

本節寫了三個Demo：

◆Absolute布局

◆Hbox布局

◆VBox布局（與前者統稱Box布局）

如果開發AIR程序或者桌面應用，可以選擇Absolute布局；但如果開發Web應用，推薦學習、研究Box布局。右擊可以查看源碼。

一、Flex布局之Absolute

用Flex新建Application時，最下面有一個布局屬性選項：Vertical,Horizontal,Absolute。意思如單詞。若選擇Absolute，則Application的子控件依據其{x,y}坐標依靠。但不影響第二代子控件，即，如果放一個HBox到該Application中，HBox中的控件則水平排列。Horizontal與Vertical相當于把Application做為一個水平或豎向的盒子(Box)，對子、孫控件的影響關系與Absolute類似。

查看Absolute，不難發現，可視區域的寬度是一定的，無論在何種分辨率下，何種瀏覽器寬度。但在Web應用中，我們不希望出現這樣的效果。相反，我們可能希望控件可以按照百分比自動調整位置。只此一條，開發Web應用，便不建議使用Absolute布局。由此便產生了方便、簡單、易用的Box布局。

二、Flex布局之Hbox

HBox讓子控件按水平方向自動排列，居右、居左或居中都可以。

查看Hbox，控件與前者沒有增減，同樣的控件。但它可以自適應瀏覽器寬度。文章的標題欄部分用了一個HBox，其包涵三個子控件：Label,Spacer與LinkButton.Spacer的寬度設為100%，這樣無論Label無多少字符，多寬，都可以把LinkButton撐到最右邊。同樣，也可以把它用在VBox中，則設置其高為100%。Spacer在Box布局中非常實用。
細心的朋友不難發現，這個Application的layout屬性是Vertical，整個App相當于一個VBox。最下面的評論文本框與按紐也在一個HBox之內。

三、Flex布局之VBox

VBox讓子控件在豎直方向上排列。top，bottom or center。

查看VBox，這個App的layout是Horiazontal，相當于一個HBox。一級控件是兩個VBox，一左一右。左邊與前面的HBox對應的部分類似。右邊用Panel與TitleWindow，還有Grid,Tile。Panel與TitleWindow都具有layout屬性，可以在其內部放置任何子控件，待遇與Application同。值得一提的是Tile，它可讓子控件流動延伸，先在x軸上排行，滿了之后再換行。TileList與其類似。

Grid酷似html中的Table，但差別很大，也不適合做布局用。實際應用中，也常用Tile或TileList代替。
Box布局可以滿足基本的項目應用，但有一些問題。譬如，文章內容要滾動顯示，能不能像Html那樣實現流布局？答案是可以的。Box布局只是基本的布局方法，并沒有發揮Flex的長處與優勢。關于State與流布局在稍后。
在商業項目開發中，Application99%都使用absolute布局，中間所用的容器間有box,tile或其它布局。

感謝各位的閱讀！關于“Flex布局怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！