How to use flexible box arrangement in CSS3

First, let's do some understanding of the salutation in the elastic box.

, the elastic box is divided into two axes, one is the spindle, one is the cross axis, the spindle direction can be changed (left and right), the direction of the spindle changes, the direction of the cross axis will also change

Then, let's take a look at the browser's approximate support situation

From the figure can be seen, ie support for the elastic box can be said hehe, other browsers can also, under the pit of IE, on the PC feel can abandon this layout scheme, but on the mobile side, Support from Android 2.1 (requires a compatible style), so on the mobile side, still can be used, but the addition of the prefix is still not forgotten.

Let's take a look at some of the flexible box's wording

Opening the Elastic box

Display:flex;

Compatible notation (this attribute is not supported in the IE10 version)

Display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;

Define sub-element arrangement (spindle direction)

Flex-direction:row;row: Horizontal from left to right (default) Row-reverse: Spindle from right to left column: spindle from top to bottom column-reverse: spindle from bottom to top

Compatible style notation

-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal; Flex-direction:column;

To define a child element wrapping condition

Flex-wrap: If the current container size is insufficient, the item is displayed with a newline. The default is not to wrap a line display. Nowarp: Item does not wrap display (default) Warp: Item wrapping is displayed, but below the first line item. Warp-reverse: Item wrapping is displayed, but on top of first line item

Compatible style notation

-webkit-flex-wrap:wrap;-webkit-box-lines:multiple;-moz-flex-wrap:wrap;flex-wrap:wrap;

This is a write-up of the two properties above

Flex-flow:row nowrap;

Compatible style notation

-webkit-flex-flow:row Wrap;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;-moz-flex-flow:row Wrap; Box-orient:horizontal;box-lines:multiple;flex-flow:row Wrap;

Arranging layouts horizontally

Flex-start: Spindle Start position alignment Flex-end: Spindle End Position Alignment Center: Spindle Center Alignment Space-between: Spindle direction justified, There is an equal interval between items Space-around: There is an interval between the left and right ends of the project in the spindle direction, so the project interval between the two ends is less than half justify-content:space-around the intermediate project interval;

Compatible notation (this property is not supported in the IE11 version, other browsers are prefixed)

-webkit-justify-content:center;justify-content:center;-moz-box-pack:center;-webkit--moz-box-pack:center; Box-pack:center;

Vertical arrangement Layout

Flex-start: Set the start point alignment of the label intersection Flex-end: Set the end point of the label intersection Align Center: Set label Intersection center Alignment Baseline: Sets the baseline alignment of the first line of text in the project stretch: Sets the height of the project to fill the height of the entire container (prerequisite: Height of the project Unspecified) Align-items:baseline;

Compatible style notation

Align-items:center;-webkit-align-items:center;box-align:center;-moz-box-align:center;-webkit-box-align:center;

Telescopic box layout

Flex:num;

Compatible style notation

Box-flex:num;-webkit-box-flex:num;-moz-box-flex:num;flex:num;-webkit-flex:num;

Element occurrence Order

Order:num;

Compatible wording

Box-order:num;-webkit-box-order:num;-moz-box-order:num;order:num;-webkit-order:num;

Well, roughly some of the properties that are often used are these, but there are some properties that are not here to say.