Chapter 3. XUL Elements and Features- P5
3.9.1. Box Attributes
The XUL element <box> defines a number of attributes and some implicit
behavior for layout. Boxes can be oriented within other boxes to define the
general layout of the UI. Some boxes stretch to fit the space available within
the top-level window or their containing element; others take only as much
space as needed to display their own children.
Attributes on the box and its child elements determine the flexibility of the
content contained within the box, the way that windows are resized, and the
alignment of elements, as Table 3-4
describes.
Table 3-4. Common box attributes
Attribute Values Default value Description
align
start | end | center |
baseline | stretch |
inherit
stretch
Determines how
the children are
aligned in
conjunction with
the box's
orientation
flex
<number> |
inherit
0.0
Determines the
flexibility of the
contained

their full size
direction
normal | reverse |
inherit
normal
Determines the
direction of the
children in the
box
ordinal-group <integer> | inherit 1
Controls the order
in which widgets
Attribute Values Default value Description
appear in a box
The attribute names in Table 3-4 (with the exception of style) are defined
directly on the box. But there are also CSS versions of these properties that
use the prefix box-. pack becomes box-pack when it's defined in CSS,
for example. These properties are not part of the CSS specification, so you
may need to go one step further and use the format -moz-box-pack.
These special extensions to CSS are described in the section Section 4.2.3
in
Chapter 4
.
The most commonly used attributes are orient, align, and pack. The
orientation of the children of a box can be either vertical or horizontal. The
default is horizontal for a plain <box>, but not for all box containers
(<groupbox> is vertical). The <vbox> and <hbox> conveniences were
created to bypass the use of this attribute and increase box layout efficiency
in the rendering phase.
Here is a look at how the pack and align properties can effect the layout of

•
<groupbox>
•
<toolbox>
•
<stack>
•
<deck>
•
<listbox>
•
<popup>
•
<statusbar>
Descriptions of the tabbed box and the group box follow. Additional
information on other box widgets can be found in the XUL element
reference in Appendix C
.
3.9.2.1. Tab box
Tab boxes may contain only <tabs> and <tabpanels> elements, as
shown in Example 3-16
. Beyond this, there is no restriction on the content
that can go into the panels themselves. For the panels to display content
properly, there have to be the same number of children and tabs in the tab
panels.
Example 3-16. Tabbed panels
<tabbox orient="vertical" flex="1">
<tabs>
<tab label="Fish" />
<tab label="Birds" />