Style properties used for formatting of flexible boxes. Refer to the topic entitled ui:flexible-box for details.
| Control | Description | Options | Property |
|---|---|---|---|
| Align | Specifies how the children of an element are placed and aligned along the direction perpendicular to the orientation of the box, and where the extra space, if any, should be positioned. | baseline, center, end, start, stretch | theme_box_flex_prop.html#mcs-box-align |
| Flexibility | Specifies the relative flexibility of the selected element. | <number> | theme_box_flex_prop.html#mcs-box-flex |
| Orientation | Specifies whether a box should lay out its children horizontally or vertically. | horizontal, vertical | theme_box_flex_prop.html#mcs-box-orient |
Specifies how the children of an element are placed and aligned along the direction perpendicular to the orientation of the box, and where the extra space, if any, should be positioned. The default value is 'stretch'.
| Option | Description |
|---|---|
| baseline | The value of 'baseline' has two meanings. If the box orientation is horizontal, all children will be placed with their baselines aligned, and extra space placed before or after as necessary. If the box orientation is vertical, then 'baseline' is treated in the same way as 'center'. |
| center | Indicates that any extra space should be divided evenly, with half placed before the child and the other half placed after the child. |
| end | Indicates that the bottom edge of each child should be placed along the bottom edge of the box, and any extra space should be placed before the element. |
| start | Indicates that the top edge of each child should be placed along the top edge of the containing box and any extra space should be placed after the element. |
| stretch | Indicates that the height of each child should be adjusted to the height of the containing block. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the relative flexibility of the selected element.
| Option | Description |
|---|---|
| <number> | Specifies the relative flexibility of the selected element. It allows floating point values. Values other than '0' indicate that the element can shrink or grow depending on the available space. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies whether a box should lay out its children horizontally or vertically. The default value is 'horizontal'.
| Option | Description |
|---|---|
| horizontal | Indicates that the box should display its children from left to right in a horizontal line. |
| vertical | Indicates that the box should display its children stacked from top to bottom vertically. |
| inherit | The value of the property should be inherited from the parent element. |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Flexible box demo</title>
</head>
<body>
<ui:flexible-box style="width: 100%;">
<xforms:model id="search">
<xforms:submission id="search-submit" action="search.xdime"/>
</xforms:model>
<xforms:input style="mcs-box-flex: 2" model="search" ref="query">
<xforms:label/>
</xforms:input>
<xforms:submit style="mcs-box-flex: 1" model="search" submission="search-submit">
<xforms:label>Go</xforms:label>
</xforms:submit>
</ui:flexible-box>
<ui:flexible-box style="width: 50%;">
<div style="background:blue; mcs-box-flex: 1;">1</div>
<div style="background:red; mcs-box-flex: 2;">2</div>
<div style="background:green; mcs-box-flex: 3;">3</div>
</ui:flexible-box>
</body>
</html>