Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Flexible Box ("Flexbox") Layout

Flexible Box ("Flexbox") Layout

This section describes features related to Flexible Box ("Flexbox") layout.

This example shows how Flexbox can be used to create a classic three-column page layout for wider screens that compresses into a single column layout for narrower displays.

Code example: http://samples.msdn.microsoft.com/workshop/samples/css/flexbox/flexbox.html

In this section



Specifies the initial main size of the flex item.


Sets the flex grow factor for the flex item.


Specifies the flex shrink factor for the flex item.


A shorthand property that specifies the parameter values of a flexible length, the positive and negative flexibility, and the preferred size specified by the flex-grow, flex-shrink, and flex-basis properties.


Specifies the alignment value (perpendicular to the layout axis defined by the flex-direction property) of flex items in the flex container.


Specifies the direction of the main axis which specifies how the flex items are displayed in the flex container.


Shorthand property to specify both the flex-direction and flex-wrap properties of a flex container.


Specifies the alignment value (perpendicular to the layout axis defined by the flex-direction property) of flex items of the flex container.


Specifies how a flex item's lines align within the flex container when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property.


Specifies the order in which a flex item within a flex container is displayed.


Specifies a how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins are resolved.


Specifies whether flex items wrap and the direction they wrap onto multiple lines or columns based on the space available in the flex container.




© 2015 Microsoft