User:Chughes90/sandbox

CSS Flex Box Layout is the latest layout model coming to CSS3. It is currently in the W3C's Candidate Recommendation (CR) stage. The new flex layout allows elements within a container to be arranged in a way fitting to the screen or device that it is being viewed on. Unlike the block layout mode, the flex layout lacks the functionality of columns and floats. It does, however, allow more flexibility in the layout of the content within the container.

Concepts
One of the most defining features of the flex layout is its ability to form fit based on its viewing environment. Flex items have the ability to either increase in size to fill up unused spaced or decrease in size in order to prevent items within the container from flowing outside of the container. While the block and inline layouts are generally uni-directionally oriented, the flex layout allows for more flexibility and is not as restricted in terms of the direction that the content can be laid out. Items within a flex container also have the ability to have their order reversed or rearranged.

Terminology
Following are a few terms associated with the flex layout model

Flex container

 * Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.

Flex item

 * Any child element held within the flex container in considered a flex item. Any text within the container element is wrapped in an unknown flex item.

Axes

 * Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.

Flex-direction
 * Establishes main axis.

Justify-content
 * Determines how content gets placed on the main axis on the current line.

Align-items
 * Determines the default for how content gets placed on the cross axis on the current line.

Align-self
 * Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Directions

 * The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.

Order
 * Places elements in groups and determines which order they are to be placed in within the container.

Flex-flow
 * Shorthands flex-direction and flex-wrap to place the flex content.

Lines

 * Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

Dimensions

 * Main size and cross size are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.

Designate a flex box
Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:
 * display: flex;

Or:
 * display: flex;

By setting the dsiplay to one of the two values above, an element becomes a flex container and its children flex items. Setting the display to flex makes the container a block-level element, while setting the display to inline-flex makes the container an inline-level element