了解Flex的容器

2021-04-17 20:02:44 字數 708 閱讀 6599

容器規則

vbox

垂直布局子標記;乙個子標記在前乙個子標記的下方顯示。

hbox

橫向布局子標記;乙個子標記在前乙個子標記的右面顯示。

canvas

子標記顯示座標(x,y)由開發人員指定。如果沒有特別指定,所有的子標記座標預設為容器的左上角(0,0)。例如,如果你新增乙個按鈕控制項到canvas容器,按鈕將在這個canvas的(0,0)座標顯示。

可以有多種布局方式,預設為canvas方式,具體的布局方式由該標記的「layout」屬性指定。layout屬性有三個選項:horizontal / vertical / absolute。分別對應hbox,vbox,canvas三種規則。

tile

子標記以行列方式布局,可以認為是乙個**,但與之區別的是,所有的格仔都有相同的寬度和高度,他們是由flex自動調整的,direction屬性可以指定tile布局的方向,預設為橫向。

panel

box容器的子類,通過layout屬性指定具體的布局方式,預設為absolute;panel容器除了用來包容子標記,還常用於提供標題欄和狀態列區域。

controlbar

controlbar容器用於停靠工具欄,通過direction指定方向。一般用在panel容器或者titlewindow容器的底部。(實驗證明,在flex3中麼有direction這個屬性,只能是

自己做的小實驗,了解各個容器的具體樣子:

FLEX容器的布局規則

vbox 子元素沿垂直方向排列。每個子元素都會繪製在前乙個子元素的下方。hbox 子元素沿水平方向排列。每個子元素都會繪製在前乙個子元素的右方。canvas 按開發者指定的x座標與y座標繪製子元素。如果沒有指定座標,則所有的子元素都繪製在容器的左上方。例如,如果在canvas中新增乙個button控...

Flex 布局 容器屬性

flex 布局,意為 彈性布局 任何乙個容器都可以指定為 flex 布局,行內元素也可以使用 flex 布局。注意 設為 flex 布局後,子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素,稱為 flex 容器,簡稱容器 它的所有子元素自...

關於flex布局容器屬性

容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行,第一行在下面...