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
| Property | Description |
|---|---|
|
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. |