Css3 elastic box layout, css3 elastic

Css3 elastic box layout, css3 elastic
First, let's take a look at the titles in the elastic box.

The elastic box is divided into two axes, one is the spindle, the other is the cross axis, the direction of the spindle can be changed (up and down), after the direction of the spindle changes, the direction of the cross axis will also change

Then let's take a look at the general support of the browser.

From the figure, we can see that ie's support for Elastic boxes can be said to be Haha, and other browsers can also. Due to ie's pitfalls, I feel like I can give up this layout scheme on the pc, however, on the Mobile End, Android 2.1 is supported (compatible writing is required), so on the mobile end, it can still be used, but the prefix to be added cannot be forgotten.

Next let's take a look at some of the elastic box writing methods to enable the elastic box

display: flex;

 

Compatible syntax (this attribute is not supported in IE10)

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 direction 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 Writing Method

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

Define child element line feed

Flex-wrap: Set whether to display line breaks when the current container size is insufficient. By default, line breaks are not allowed. Nowarp: project does not wrap display (default) warp: project line feed display, but below the first line of project. Warp-reverse: The line feed of the Project is displayed, but on the top of the first line of the project

 

Compatible Writing Method

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

This is the combination of the above two attributes

flex-flow: row nowrap;

 

Compatible Writing Method

-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;

Horizontal Layout

Flex-start: spindle start position alignment flex-end: spindle end position alignment center: spindle center alignment space-between: the two ends of the spindle direction alignment, there is an equal interval between items space-around: there is an interval between the left and right sides of the project in the direction of the main axis. Therefore, the project interval between the two ends is half the interval between the two ends. justify-content: space-around und;

Compatible syntax (this attribute is not supported in IE11, and prefix is required for other browsers)

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

Vertical layout

Flex-start: Set the starting point of the tag cross axis. flex-end: set the end point of the tag cross axis. Align: Set the Tag Cross axis to center and align with baseline: set the baseline alignment of the first line of text in the project. stretch: set the project height to full the height of the entire container (premise: the project height is not specified) align-items: baseline;

Compatible Writing Method

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

Scaling box Layout

flex:num;

Compatible Writing Method

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

Element appearance sequence

order:num;

Compatible Writing Method

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

Well, there are some commonly used attributes. In fact, there are some attributes, so I won't talk about them here (I 've never used them anyway ~~)