States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 191

Now go back to default.html and add the following markup that includes the elements to be styled
with the preceding style sheet classes:

<div id="flexBox" class="flexible-container">
<div id="block1">Europe</div>
<div id="block2">North America</div>
<div id="block3">Australia</div>
<div id="block4">Asia and Far East</div>
<div id="block5">South America</div>
</div>

You have now a container—the DIV element named lexBox —that is capable of flowing its
content—the five child elements named block N—within any available space. The major benefit is that
no content will be cropped. In addition, child blocks will wrap and be aligned as specified by the
-ms-flex-XXX attributes of the flexible-container CSS class. The key style, however, is the -ms-flexbox
value assigned to the display attribute of the flexible-container CSS class: this is the attribute that
makes the content of a DIV element flow vertically or horizontally and according to other parameters.
Table 8-1 provides a quick summary of the options you have to further customize the rendering of
child elements in a flexible box.

TABLE 8-1 Styles supported by a flexible box

Style Description

Indicates the orientation of all child elements within the flexible box. Possible values are:
row, column, row-reverse, and column-reverse. The default value is row. A value of row
indicates that child elements flow horizontally to fill up space. Elements are listed in the
order they are declared in the source code. A value of column , instead, makes elements
flow vertically. The reverse qualifier is used if you want to invert the order of elements
and proceed from the last to the first.

-ms-flex-direction

Indicates the alignment of child elements within the flexible box. The alignment is meant
to be vertical if the direction (ms-flex-direction style ) is horizontal and horizontal if the
direction is vertical. Possible values are: start, end, center , and stretch (default). A value
of start aligns elements to the top (or left). A value of end aligns to the bottom (or right).
A value of center just centers elements, whereas a value of stretch gives all elements the
maximum width/height available.

-ms-flex-align

Indicates how excess space is distributed between child elements in the flexible box.
Possible values are: start, end, center , and justify (default). A value of start leaves any
space at the end of the row/column. A value of end leaves any space at the beginning of
the row/column. A value of center just centers elements, whereas a value of justify splits
the excess space between child elements.

-ms-flex-pack

Indicates whether child elements wrap onto multiple lines or columns based on the space
available in the object. Possible values are: none (default), wrap , and wrap-reverse. A
value of none indicates that each child element goes on a separate row/column. A value
of wrap , instead, forces the flexible box to accommodate child elements sequentially in
the order of declaration. A value of wrap-reverse , instead, flows elements in the reverse
order.

-ms-flex-wrap

At this point, try compiling and running the application. You should get the output of Figure 8-9
when the application is filled.