Choosing a layout (HTML)
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
To provide the most flexible and adaptable user interface for the users of your Windows Runtime app, you first need to decide on the layout mode most appropriate for your content and the views through which the content can be consumed. This topic describes the Cascading Style Sheets, Level 3 (CSS3) layout features supported by Windows Store apps in Windows 8. Flexible Box and Grid layout are useful for creating fluid layouts for apps and custom controls, while Multi-column and Regions are most useful for laying out text and other reading content.
Flexible Box layout
Flexible Box (Flexbox) is a layout mechanism where child elements are arranged and sized using a constraint-based system that supports both relative flexible sizing and intrinsic sizing. Flexible Box layouts can adapt to multiple screen sizes and enable digital newspaper, magazine, and other digital print media consumptive scenarios.
Flexbox layout is intended for laying out complex web pages, and is especially useful for making the relative position and size of elements stay constant, even as screen and browser window sizes vary and change. This can lessen the reliance on floats, which are more complicated to position and size correctly.
Flexbox layout takes the available space into account when defining box dimensions, which enables relative sizing and positioning. For example, you can ensure that extra whitespace in a browser window is equally distributed to the size of multiple child elements, and that those child elements are centered in the middle of the containing block.
With Flexbox layout, you can:
- Build a layout that is fluid—even by using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
- Specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements.
- Specify how excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements.
- Specify how excess space perpendicular to the layout axis of an element can be shaped around the element—for instance, extra space above or below buttons that have been laid out side by side.
- Control the direction that elements are laid out on the page—for instance, top to bottom, left to right, right to left, or bottom to top.
- Reorder elements on the screen in an order that is different from how they are specified by the Document Object Model (DOM).
Unlike Grid, Flexbox does not require child elements to be explicitly positioned in the parent container. You might prefer to use Grid when designing lightweight item containers with a dynamically determined number of child elements.
To learn more, see Flexible box ("Flexbox") layout.
Grid alignment
The Grid provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their app by referencing the Grid Lines between the columns and rows, or by defining and referencing a Grid Cell, which is a rectangular space covering an intersection of columns and rows.
Like Flexbox, the Grid enables more layout fluidity than is possible positioning by using floats or script. It enables you to divide space for major regions of a webpage or web application, and to define the relationship between parts of an HTML control in terms of size, position, and layer. This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window. Because the Grid enables you to align elements into columns and rows but has no content structure, it also enables scenarios that are not possible with HTML tables. By using the Grid in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more. Because Grid controls both horizontal and vertical layout, you might prefer to use Grid instead of Flexbox for your top-level app layout.
To learn more, see Grid layout.
Multi-column layout
Multi-column layouts support content flow from one column to another for an arbitrary number of columns.
Multi-column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window. A multi-column element is defined by the W3C as an element whose column-width or column-count property is not auto and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Multi-column elements can have multiple rows of column boxes. Rows are divided by column spanning elements (elements that have column-span:all specified). Rows are ordered in the direction of the multi-column element. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.
To learn more, see Multi-column layout.
Regions layout
Regions layout is a page layout feature that lets you take a single content stream and segment that stream into multiple empty containers in an HTML template. HTML templates are documents that are largely empty of original content, and are instead composed primarily of empty containers that are sized and positioned to give incoming content a specific layout. You can use regions to flow text across multiple columns that are explicitly sized and positioned using Cascading Style Sheets (CSS), creating a newspaper or magazine-style layout.
To learn more, see Regions.
Hands-on labs for Windows 8
If you’d like to try working with app layouts and other key Windows 8 features, download the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).