CSS Flexbox

This code demonstrates how Flexbox can be used to create a simple item collection to hold elements such as images and text boxes. To demonstrate, please resize the browser window's width--as the Flexbox container changes size, the Flexbox creates more or fewer lines of elements and wraps the element collection as needed. The code below shows how the Flexbox container has the -ms-flex-flow property set to row wrap, which cases elements to wrap around the box and create multiple rows as needed.

Code

#collection
{
    width: 50%;
    border: 1px solid black;

    /* Specifies that the toolbar contents will be laid out according to Flexbox rules. */
    display: -ms-flexbox;

    /* Specifies that the flexbox will lay out its children in multiple lines*/
    -ms-flex-flow: row wrap;

    /* Specifies that the flexbox will position its children at the top of the container in LTR mode*/
    -ms-flex-align: start;
}