箱子布局是一種新穎的布局方式，其布局模型可以更好地優化ui設計的工作。它率先在 xul 介面語言中被提出，廣泛應用於 mozilla 的應用程式，如 firefox 等等。在 css 布局系統中（for css v3），作為新增的補充形式，箱子布局可以指定子元素在水平或垂直的任意一種方向進行排列，剩下有多的空間由已宣告了的子元素來填空（宣告 flex 項）。
我們知道，在 ext js 中，容器裡面是用來放置元件的，至於容器內的子元件怎麼排列就由布局風格來指定。3.0 提供了新的基於箱子模型的布局方式，分別是 hbox 和 vbox，對應的命名空間是 ext.layout.hboxlayout 和 ext.layout.vboxlayout。hbox 全稱 horizontal box，其中所有子項都是自動按順序橫排。vbox 則相反，全稱 vertical box，裡面為豎排方式。所謂箱子模型的意思，就是將顯示部分分割成一系列的 box，按照水平的或垂直的兩種方位排列組織。水平 box 可以將其子元件排成一條線，而垂直 box 可以將其子元件定位成垂直方向。如果既然要水平方向和垂直方向兩個方向填充內容，我們可以相互內嵌布局，即水平布局內嵌垂直布局，或垂直布局內嵌水平布局。
透過下圖的乙個例子可以看到兩種方向的不同。
箱子模型的理論其實很人性化，既可以支援固定值尺寸的子項內容，也可以支援自適應的子項。箱子布局中的元素可以分配乙個固定的值，也有可能加大尺碼，這是容器空間有餘的情況；另一種情況，則是容器空間不夠容納元素，就縮小某個元素的尺寸以適應。作用在那個元素身上？有 flex 配置項的子項元素，也就是說，hbox/vbox 布局會把有設定 flex 配置的子項劃分垂直或水平的空間。另外，容器中元素的位置和順序也會某程度地改變。
flex 配置項不是設定在布局上，而是設定在子項的配置項。每個子項相對的 flex 值都會與全體子項 flex 累加的值相比較，根據此結果，處理每個子項的 flex 最後是多少。若不設定子項的 flex，表示不對子項作自適應尺寸的處理，相當於 flex = 0 的子項或 flex = undefined 的時候，表示子項不會自伸縮處理，而採用最初的尺寸。
如下例：
該配置項效果如下圖：
如果子項都設定相同 flex 值，那就意味著全體子項作相同的處理。
技巧：我們可以只讓乙個 panel 設定 flex，便可以作為填充空白的 spacer：
效果如下：
flex 的文件也不是說得太清楚，不過我們可以多參考官方例子是怎麼使用 flex 的。一旦你明白了flex 這個概念之後，它會非常靈活地進行布局。
當然我們可以 vbox 布局中內嵌 hbox 布局，或者 hbox 中內嵌 vbox，hbox 和 vbox 之間是可以允許巢狀布局的，但實際不必如此手動去做， ext js 為我們提供了「對齊 align/pack」的這一對方向各異的調整配置，代替了上述「內嵌」的這一種稍微讓人感覺彆扭。容器中每乙個子項都遵循使用者指定的 align/pack 對齊方式。一般設定的地方是在容器的 layoutconfig 配置項物件中，如下面某乙個容器的**片斷：
對於垂直布局的 vbox 而言，屬性 align 就是水平對齊的設定了，align 有以下可選項：
鍵值作用
left
居左，從容器的left開始水平對齊。這是系統預設的選項。
center
居中，從容器的mid-width開始垂直對齊。
stretcn
拉伸子項以填充容器的水平寬度。
stretcnmax
拿最寬的那個子項拉伸，適應容器的水平寬度。
屬性 pack 是控制容器裡面的子項是如何停靠的，這是垂直方向本身的對齊。有如以下設定：
鍵值作用
start
居頂，從容器的top停靠子項。這是系統預設的選項。
center
居中，也就是子項都從容器的mid-height上開始停靠。
end居底，從容器的底部邊邊開始往上擺子元件。
對於水平布局的 hbox 而言，align 就是決定如何垂直對齊，align 的可選項有如下：
鍵值作用
top頂部對齊，從容器的top開始垂直對齊。
middle
居中對齊，從容器的middle開始垂直對齊。
stretch
拉伸子項以填充容器的垂直高度。
stretchmax
拿最高的那個子項拉伸，適應容器的垂直高度。
pack的可選項有以下幾種：
鍵值作用
start
居左，從左邊開始排列內容。
center
居中，也就是從容器的mid-width開始停靠內容。
end居右，從容器的右邊開始停靠內容。
boxlayout 可設定外邊距（margins）。關於 defaultmargins，就是如果不制定每個子項的 margins 屬性，那麼就會使用預設的 margins。規定 defaultmargins 的格式如下：
預設為 。margin 屬性接納的格式也可以是字串的，規定為空格隔開，數字型別的 margin 值。各個方向的排列順序為 css 的順序：
boxlayout 可設定內邊距（padding）。跟 defaultmargins 差不多，padding 屬性接納的格式也可以是字串的，其格式規定為空格隔開，數字型別的 margin 值。各個方向的排列順序為 css 的順序。
需要說明的是，h & v 箱子模型只限特定的應用場合使用，不是在任何布局都可適應。例如，h & v boxlayout 就不支援渲染表單的 fieldlabels。要解決此問題，可以為 fieldlables 增加一層 layout:'form' 的容器。儘管理論上可設計乙個滿足多樣需求的布局，但效能會是一大障礙（可參閱 http: //www.extjs.com/forum/showthread.php?p=396565#post396565）。也可以使用其他的布局風格，如 tablelayout 代替，但 tablelayout 乙個明顯的不足是其子項的增、刪、改都不太方便；再如浮動布局 floatlayout，floatlayout 很像水平布局的 hboxlayout，支援 x/y 的絕對布局，不過就沒有自適應大小的功能。如果沒有大小尺寸不夠放得下，就換行顯示。floatlayout 同樣有拉伸子項的功能，也支援 top/bottom/middle 對齊，以及居中、居左、居右的功能。
可見，h & v boxlayout 越來越備受推崇，必須把它弄懂才行。學習游泳最好的方法就是跳進水裡大膽試試，把上面的例子和官方原始碼當作你的湖吧！
extjs 箱子布局
flex 配置項不是設定在布局上，而是設定在子項的配置項。每個子項相對的 flex 值都會與全體子項 flex 累加的值相比較，根據此結果，處理每個子項的 flex 最後是多少。若不設定子項的 flex，表示不對子項作自適應尺寸的處理，相當於 flex 0 的子項或 flex undefined 的...
H5前端基礎 布局
浮動 使用float來設定元素浮動 可選值 none 預設值，不浮動，元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動 4.如果浮動元素的上邊是...
H5中的布局標籤
h5中的布局標籤 1.html是具有語義化的語言,針對頁面的布局,有一類標籤代表各種意義的 布局盒子 2.所有的布局標籤都主要是用來構建頁面的內容區域，是雙標籤型別，預設顯示為塊狀元素 3.標籤 布局 盒子 4.html5新增的常用的布局標籤 頁面 區域頭部 頁面 區域底部 導航 文件中的章節，區段...