Flex的定位和布局

2021-08-29 15:06:39 字數 1407 閱讀 1293

**

flex/flash, flex2, flex3 ggnet 03月 9th. 2008, 6:59pm

在乙個 flex 程式中,有三種方法來定位你的元件。

• 使用自動定位

• 使用絕對定位

• 使用基於約束的布局

1.自動定位

• layout:可能的值為」horizontal」, 「vertical」 和 「absolute」。當它設定為

「horizontal」的時候,容器會把其子控制項水平布局,即布局成一行。當它設定為 「vertical」 的時候,容器會把其子控制項垂直布局,即布局成一列。關於設定為 「absolute」 的資訊,請看下面的「絕對定位」和「基於約束的布局」部分。

• horzontalalign:可能的值為」left」, 「center」或者」right」。

• verticalalign:可能的值為」top」, 「middle」或者」bottom」。

2.使用絕對定位

有三種容器支援絕對定位:

• canvas 容器總是使用絕對定位。

使用絕對定位的時候,你將通過x和y 屬性,或者定義乙個基於約束的布局來設定

其子控制項的位置;否則,flex 會把容器的子元件放到該容器的座標 0,0 的位置。如

果你定義了元件的x和y座標,只有在更改了這些屬性值以後 flex 才會重新定位這

些元件。

[color=red]使用絕對定位是使 flex 控制項重疊的唯一方法。[/color]

3.使用基於約束的布局

通過使用容器中子元件的top, bottom, left, right, horizontalcenter, 或

者verticalcenter 樣式屬性來制定約束條件。

樣式屬性top, bottom, left, 和 right以畫素為單位定義了該元件的邊緣同相應容

器邊緣的距離。

樣式屬性horizontalcenter 和 verticalcenter定義了在指定方向上(水平或垂直)

元件中心與其所在容器中心的距離;負數值會使元件相對於中心偏左或者偏上。

樣式屬性horizontalcenter 和 verticalcenter定義了相對於容器中心的偏移量

(以畫素為單位),那是控制項要放置的地方。

不要同樣式屬性 verticalcenter 一起使用樣式屬性 top 或 bottom 。

verticalcenter 的值會覆寫其它的屬性。同樣,不要同樣式屬性 horizontalcenter

一起使用樣式屬性 left 或 right

使用基於約束的布局所定義的大小會覆寫掉任何顯式或者基於百分比的大小定義。

例如,如果你定義了樣式屬性 left 和 right,所產生的基於約束的寬度會覆寫所有

的通過 width 或 percentwidth 屬性設定的寬度。

聖杯布局 雙飛翼布局 Flex布局和絕對定位布局

1.設定基本樣式 為了高度保持一致給left main right都加上min height 130px。2.聖杯布局是一種相對布局,首先設定父元素container的位置 實現效果是左右分別空出200px和300px區域,效果如圖 3.將主體部分的三個子元素都設定左浮動 出現了如下情況,怎麼辦,別...

flex 絕對定位的三欄布局,以及flex的擴充

三欄布局依然是下面這樣。絕對定位 content left right body content,left,right left,right left right content 上面用flex彈性盒子和position absolute絕對定位完成了三欄布局,下面將對flex組成的三欄布局進行擴充...

Flex3 元件的定位和布局

flex 元件的定位和布局 在 flex 應用程式中定位元件的方法有三種 使用自動定位對於大多數容器,flex 會根據容器的布局規則 如布局方向 容器填充和容器的子級之間的間隙 自動定位容器子級。對於使用自動定位的容器,直接設定其子元件的 x 或 y 屬性或呼叫 move 方法沒有任何效果,或僅有乙...