Spacer and flex

For better laying out the elements of a graphic interface, to separate them and control their size, the spacer tag and the flex attribute are used.

spacer

This element has only one attribute, flex. It is an invisible component whose the goal is to separate other graphic elements.

flex

It is the attribute of spacer but also of all other graphic components . It does not define a size, but a proportion. If a component has a flex attribute of 1 and the other of 9, the first will occupy a tenth of the space which contains them, and the second will occupy the nine tenth. These proportions apply inside a XUL container, the attribute would not have any effect if the components were in an HTML container as div.

Example

In this simple interface, one will have an input textfield accompanied by a button, and another button without relationship with these two elements. This last must always be on the right of the window.

<box style= " ba<box style="background-color:#EEE;">
    <groupbox min-width="500" style="margin:16px;padding:8px;"  flex="1">
        <textbox />
        <button label="Submit" />
        <spacer flex="8" />
        <button label="Help" flex="2" />
        </hbox>
        </groupbox>
</box>	

Detail of elements:

1. box: it is given a gray background to see the complete space of the interface.
2. groupbox: a border is displayed around the space which interests us.
3. textbox: input text field. Its size is fixed.
4. Submit button: fixed size button, no flex attribute.
5. spacer: the value 8 of the attribute gives a broad proportion to the separating space. If the last help button had a fixed size like the submit button, value 1 would have been enough so that the spacer fills the space because the other elements would be all fixed in size.
6. Help button: one wants that it is broader than the first button thus a proportion 2, for the demonstration.

• Demo code.zip.