CSS Flexbox

This code demonstrates how Flexbox can be used to create a simple menu or toolbar within an application that resizes according to the application layout. To demonstrate, please resize the browser window width. The code below shows how the toolbar has a minimum size when the browser window is at 300px, and a maximum size when the browser window is at 750px. In between these sizes, the buttons grow and add space between themselves. The toolbar also lays itself out differently when the browser window is placed in portrait mode (window height > window width).

Code

#toolbar
{
    height: 50px;
    border: 1px solid black;

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

    /* Specifies that any excess space that does not go to flexible children will be evenly distributed between them*/
    -ms-flex-pack: justify;

    /* Ensures that the toolbar will not expand beyond 750 pixels */
    max-width: 750px;

    /* Ensures that the toolbar will not shrink beyond 300 pixels */
    min-width: 300px;

    /*styling rules*/
    background-color: #115511;
    border-radius: 10px;
}