EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

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

PropertyDescription

flex-basis

Specifies the initial main size of the flex item.

flex-grow

Sets the flex grow factor for the flex item.

flex-shrink

Specifies the flex shrink factor for the flex item.

flex

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.

align-items

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

flex-direction

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

flex-flow

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

align-self

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

align-content

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.

order

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

justify-content

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

flex-wrap

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

 

 

 

표시:
© 2014 Microsoft