CSS Flexbox: Description

CSS Flexbox
Last Updated: 9/14/2011
Introduction
CSS Flexbox lets you create webpages with elements, controls, forms, toolbars, and menus that can resize and reposition themselves when the user changes the size of the browser window. This can help you design more flexible webpages that can automatically adapt to changing browser windows. As the window changes, you can control what the user sees, rather than just having elements and text truncated as a windows shrinks.
Building the Sample

The sample contains HTML, CSS, and JavaScript files, along with a project file that you can open in Visual Studio, or your favorite editor. To run the sample, open the default.html file in your HTML5 enabled browser.
Description
This sample demonstrates two ways CSS Flexbox can be used to create menus, toolbars, and controls of screen elements that resize according to the applications layout. The Flexbox Toolbar example shows how a toolbar can change orientation as the browser window change in size to keep as much content displayed for the user. The Flexbox item collection example shows how Flexbox can be used to create a simple collection to hold elements such as images and text boxes. When the screen resizes, Flexbox creates more or fewer lines of elements and wraps the element collection as needed. As less and less room is available horizontally, the layout puts more items on more lines. The view source option lets you see a preview of the CSS code that controls how the collection is laid out.
Source Code Files

Default.html - contains HTML source for examples program.js - contains JavaScript source code for examples
program.css - contains CSS source code for the examples
Default.html - contains HTML source for examples

<!DOCTYPE html>  <html> <head> <title>CSS Flexbox</title> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <link rel="stylesheet" type="text/css" href="css/base-sdk.css" /> <link rel="stylesheet" type="text/css" href="css/program.css" /> <script type="text/javascript" src="base-sdk.js"></script> <script type="text/javascript" src="program.js"></script> </head> <body role="application"> <div id="header" role="contentinfo"></div> <h1>CSS Flexbox</h1> <h2 id="inputLabel">Input</h2> <div id="input" role="main" aria-labelledby="inputLabel"> <div class="options"> <h3 id="listLabel">Select scenario:</h3> <select size="7" id="scenarios" aria-labelledby="listLabel"> <option selected="selected" value="1">1) Flexbox toolbar</option> <option value="2">2) Flexbox item collection</option> </select> <a id="sourceToggle">View Source</a> </div> <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive"> <h3 id="descLabel">Description:</h3>  <div class="item" id="scenario1Input"> <p>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 250px, 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).</p> <br /><br /> <pre id="scenario1Source" class="hidden"> #toolbar {
height: 50px; border: 1px solid black; /* Specifies that the toolbar contents will be laid out according to Flexbox rules. */ display: -ms-box; /* Specifies that any excess space that does not go to flexible children will be evenly distributed between them*/ -ms-box-pack: justify; /* Ensures that the toolbar will not expand beyond 750 pixels */ max-width: 750px; /* Ensures that the toolbar will not shrink beyond 250 pixels */ min-width: 250px; /*styling rules*/ background-color: #115511; border-radius: 10px; } .appButton { /* Sets all excess space to be evenly distributed between the buttons*/ -ms-box-flex: 1; /* Buttons will only grow to 150 pixels wide */ /* Note that in combination with the 750 max width for the toolbar, the 150 max width for the 4 flexible children means that the children will all grow in size to 150px, then 3 gaps between the children will grow up to 50px until the toolbar reaches its maximum size and all growth stops */ max-width: 150px; /* Ensures that the buttons will not shrink beyond 50 pixels */ min-width: 50px; width: 30px;
/*styling rules*/ background-color: #119911; border: 1px solid #11CC11; border-radius: 10px; margin: 2px; color: #CCCCCC; font-weight: bold; } #buttonPlay
{ /* Here the A button is set to grow 3 times faster than other buttons in the toolbar. That is, 3 times the excess space is added to the A button as to other children of the toolbar. */ -ms-box-flex: 3; max-width: 225px; }
#buttonVolPlus { margin-bottom: 0px; border-radius: 10px 10px 0px 0px; } #buttonVolMinus { margin-top: 0px; border-radius: 0px 0px 10px 10px; } /* Controls the styling of a subgroup of buttons */ #buttonGroup { display: -ms-box; /* The default layout of flexbox children is along the inline axis; this sets blocks to be laid out in a perpendicular direction */ -ms-box-orient: block-axis; /* Sets the div surrounding the buttons to have the same flexibility and constraints as other buttons */ -ms-box-flex: 1; max-width: 150px; }
/* When the browser window is laid out in a portrait orientation (i.e. height greater than width) the toolbar transitions to a new layout defined by the CSS rules below */ @media (orientation:portrait) { #toolbar { /* CSS rules set the toolbar height at 300px, width at 120px*/ height: 300px; width: 120px; /*Need to reset min-width for portrait mode*/
min-width: 50px;
/* When in portrait layout, the buttons are laid out along the block axis, which is vertical for Western languages */ -ms-box-orient: block-axis; } #buttonGroup { display: -ms-box; /* This property changes the C and D buttons to, again, be laid out perpendicular to the toolbar layout */ -ms-box-orient: inline-axis; -ms-box-flex: 1; max-height: 50px; } #buttonPlay { /* Here the A button is set to grow 3 times faster than other buttons in the toolbar. That is, 3 times the excess space is added to the A button as to other children of the toolbar. */ -ms-box-flex: 3; max-height: 150px; } #buttonReverse { /* The ordinal group property for the B and E buttons mean that they will be laid out in the toolbar only after elements in lower groups (in this case the A and buttonGroup elements, which have a default ordinal group of 1) are laid out. Accordingly, ordinal group effectively controls the display order of flexbox children. */ -ms-box-ordinal-group: 2; max-height: 50px; } #buttonForward { -ms-box-ordinal-group: 2; max-height: 50px; } #buttonVolPlus { margin-bottom: 2px; margin-right: 0px; border-radius: 10px 0px 0px 10px;
} #buttonVolMinus { margin-top: 2px; margin-left: 0px; border-radius: 0px 10px 10px 0px; } } </pre> </div>  <div class="item" id="scenario2Input"> <p>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-box-lines property set to multiple, which cases elements to wrap around the box and create multiple lines.</p>
<pre id="scenario2Source" class="hidden"> #collection { width: 50%; border: 1px solid black; /* Specifies that the toolbar contents will be laid out according to Flexbox rules. */ display: -ms-box; /* Specifies that the flexbox will lay out its children in multiple lines*/ -ms-box-lines: multiple; /* Specifies that the flexbox will position its children at the top of the container in LTR mode*/ -ms-box-align: before; } .itemClass1 { background-color: red; border: 3px solid magenta; margin: 5px; } .itemClass2
{ background-color: blue; border: 3px solid cyan; margin: 5px; font-size: 2em; } .itemClass3 { background-color: green; border: 3px solid grey; margin: 5px; } </pre> </div>
<h2 id="outputLabel"> Output</h2> <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive"> <div id="statusMessage"></div>  <div class="item" id="scenario1Output"> <div id="toolbar"> <button class="appButton" id="buttonReverse">Reverse</button> <button class="appButton" id="buttonPlay">Play</button> <button class="appButton" id="buttonForward">Forward</button>  <div id="buttonGroup"> <button class="appButton" id="buttonVolPlus">Vol +</button> <button class="appButton" id="buttonVolMinus">Vol -</button> </div> </div> </div>  <div class="item" id="scenario2Output"> <div id="collection"> <div class="itemClass1">First child</div> <div class="itemClass2">Second child</div> <div class="itemClass3">Third child</div> <div class="itemClass2">Second child</div> <div class="itemClass3">Third child</div> <div class="itemClass1">First child</div> <div class="itemClass3">Third child</div> <div class="itemClass2">Second child</div>
<div class="itemClass1">First child</div> <div class="itemClass2">Second child</div> <div class="itemClass1">First child</div> <div class="itemClass2">Second child</div> <div class="itemClass3">Third child</div> <div class="itemClass2">Second child</div> </div> </div> </div>
</div> <div id="sourceViewer" class="hideSource"> <img src="images/copy.png" alt="Copy Source" id="copySource"/> <div id="sourceContainer"> <pre id="rawSource"> </pre> </div> </div> </div> <div class="clear"></div>
<div id="footer" role="contentinfo"></div> </body> </html>
program.js - contains JavaScript source code for examples

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF //// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO //// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A //// PARTICULAR PURPOSE. //// //// Copyright (c) Microsoft Corporation. All rights reserved /// <reference path="base-sdk.js" /> (function () { function id(elementId) { return document.getElementById(elementId); }
function initialize() { // Add any initialization code here } function onScenarioChanged() { // Do any necessary clean up on the output, the scenario id // can be obtained from sdkSample.scenarioId. sdkSample.displayStatus(""); } if (document.addEventListener) { document.addEventListener("DOMContentLoaded", initialize, false); } else { window.onload = initialize; } })();
program.css - contains CSS source code for the examples

#toolbar { height: 50px; border: 1px solid black; /* Specifies that the toolbar contents will be laid out according to Flexbox rules. */ display: -ms-box; /* Specifies that any excess space that does not go to flexible children will be evenly distributed between them*/ -ms-box-pack: justify; /* Ensures that the toolbar will not expand beyond 750 pixels */ max-width: 750px; /* Ensures that the toolbar will not shrink beyond 250 pixels */ min-width: 250px; /*styling rules*/ background-color: #115511; border-radius: 10px; } .appButton { /* Sets all excess space to be evenly distributed between the buttons*/
-ms-box-flex: 1; /* Buttons will only grow to 150 pixels wide */ /* Note that in combination with the 750 max width for the toolbar, the 150 max width for the 4 flexible children means that the children will all grow in size to 150px, then 3 gaps between the children will grow up to 50px until the toolbar reaches its maximum size and all growth stops */ max-width: 150px; /* Ensures that the buttons will not shrink beyond 50 pixels */ min-width: 50px; width: 30px;
/*styling rules*/ background-color: #119911; border: 1px solid #11CC11; border-radius: 10px; margin: 2px; color: #CCCCCC; font-weight: bold; } #buttonPlay { /* Here the A button is set to grow 3 times faster than other buttons in the toolbar. That is, 3 times the excess space is added to the A button as to other children of the toolbar. */ -ms-box-flex: 3; max-width: 225px; }
#buttonVolPlus { margin-bottom: 0px; border-radius: 10px 10px 0px 0px; } #buttonVolMinus { margin-top: 0px; border-radius: 0px 0px 10px 10px; } /* Controls the styling of a subgroup of buttons */ #buttonGroup { display: -ms-box;
/* The default layout of flexbox children is along the inline axis; this sets blocks to be laid out in a perpendicular direction */ -ms-box-orient: block-axis; /* Sets the div surrounding the buttons to have the same flexibility and constraints as other buttons */ -ms-box-flex: 1; max-width: 150px; }
/* When the browser window is laid out in a portrait orientation (i.e. height greater than width) the toolbar transitions to a new layout defined by the CSS rules below */ @media (orientation:portrait) { #toolbar { /* CSS rules set the toolbar height at 300px, width at 120px*/ height: 300px; width: 120px; /*Need to reset min-width for portrait mode*/ min-width: 50px;
/* When in portrait layout, the buttons are laid out along the block axis, which is vertical for Western languages */ -ms-box-orient: block-axis; } #buttonGroup { display: -ms-box; /* This property changes the C and D buttons to, again, be laid out perpendicular to the toolbar layout */ -ms-box-orient: inline-axis; -ms-box-flex: 1; max-height: 50px; } #buttonPlay { /* Here the A button is set to grow 3 times faster than other buttons in the toolbar. That is, 3 times the excess space is added to the A button as to other children of the toolbar. */ -ms-box-flex: 3;
max-height: 150px; } #buttonReverse { /* The ordinal group property for the B and E buttons mean that they will be laid out in the toolbar only after elements in lower groups (in this case the A and buttonGroup elements, which have a default ordinal group of 1) are laid out. Accordingly, ordinal group effectively controls the display order of flexbox children. */ -ms-box-ordinal-group: 2; max-height: 50px; } #buttonForward { -ms-box-ordinal-group: 2; max-height: 50px; } #buttonVolPlus { margin-bottom: 2px; margin-right: 0px; border-radius: 10px 0px 0px 10px; } #buttonVolMinus { margin-top: 2px; margin-left: 0px; border-radius: 0px 10px 10px 0px; } } #collection { width: 50%; border: 1px solid black; /* Specifies that the toolbar contents will be laid out according to Flexbox rules. */ display: -ms-box; /* Specifies that the flexbox will lay out its children in multiple lines*/ -ms-box-lines: multiple; /* Specifies that the flexbox will position its children at the top of the container in LTR mode*/ -ms-box-align: before;
} .itemClass1 { background-color: red; border: 3px solid magenta; margin: 5px; } .itemClass2 { background-color: blue; border: 3px solid cyan; margin: 5px; font-size: 2em; } .itemClass3 { background-color: green; border: 3px solid grey; margin: 5px; }

CSS Flexbox: Description

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Flexbox: Description

Uploaded by

Copyright:

Available Formats

CSS Flexbox

Last Updated: 9/14/2011

Building the Sample

Source Code Files

program.css - contains CSS source code for the examples

Default.html - contains HTML source for examples

<div id="footer" role="contentinfo"></div> </body> </html>

program.js - contains JavaScript source code for examples

program.css - contains CSS source code for the examples

You might also like