Shulou(Shulou.com)06/02 Report--

This article mainly explains "the analysis of the new and old mixed writing methods of Flex layout". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn the "Flex layout of new and old mixed writing method analysis" bar!

Old grammar chapter

Define the display property of the container

.box {display:-moz-box; / * Firefox*/ display:-webkit-box; / * Safari,Opera,Chrome*/ display: box;}

Container Properti

1.box-pack attribute

Box-pack defines the principal axis alignment of child elements.

.box {- moz-box-pack: center; / * Firefox*/-webkit-box-pack: center; / * Safari,Opera,Chrome*/ box-pack: center;}

The box-pack property has a total of four values:

.box {box-pack: start | end | center | justify; / * Spindle alignment: left alignment (default) | right alignment | Center alignment | left alignment * /}

2.box-align attribute

Box-align defines the alignment of child elements' cross axes.

.box {- moz-box-align: center; / * Firefox*/-webkit-box-align: center; / * Safari,Opera,Chrome*/ box-align: center;}

The box-align property has a total of five values:

.box {box-align: start | end | center | baseline | stretch; / * Cross Axis alignment: top alignment (default) | bottom alignment | Center alignment | text baseline alignment | align up and down and fill * /}

3.box-direction attribute

Box-direction defines the display direction of child elements.

.box {- moz-box-direction: reverse; / * Firefox*/-webkit-box-direction: reverse; / * Safari,Opera,Chrome*/ box-direction: reverse;}

The box-direction property has a total of three values:

.box {box-direction: normal | reverse | inherit; / * display direction: default direction | reverse direction | box-direction*/ of inheriting child elements}

4.box-orient attribute

Box-orient defines whether child elements should be arranged horizontally or vertically.

.box {- moz-box-orient: horizontal; / * Firefox*/-webkit-box-orient: horizontal; / * Safari,Opera,Chrome*/ box-orient: horizontal;}

The box-orient property has a total of five values:

.box {box-orient: horizontal | vertical | inline-axis | block-axis | inherit; / * arrangement direction: horizontal | Vertical | inline arrangement (default) | Block arrangement | inherit parent box-orient*/}

5.box-lines attribute

Box-lines defines whether child elements are allowed to wrap when they are outside the container.

.box {- moz-box-lines: multiple; / * Firefox*/-webkit-box-lines: multiple; / * Safari,Opera,Chrome*/ box-lines: multiple;}

The box-lines property has a total of two values:

.box {box-lines: single | multiple; / * allows line wrapping: not allowed (default) | allows * /}

Child element attribute

1.box-flex attribute

Box-flex defines whether the current child element is allowed to scale.

.item {- moz-box-flex: 1.0; / * Firefox*/-webkit-box-flex: 1.0; / * Safari,Opera,Chrome*/ box-flex: 1.0;}

The box-flex property uses a floating-point value:

.item {box-flex:; / * scaling: * /}

2.box-ordinal-group attribute

Box-ordinal-group defines the order in which child elements are displayed. The smaller the value, the higher the order.

.item {- moz-box-ordinal-group: 1; / * Firefox*/-webkit-box-ordinal-group: 1; / * Safari,Opera,Chrome*/ box-ordinal-group: 1;}

The box-direction property uses an integer value:

.item {box-ordinal-group:; / * display order: * /}

New version of grammar

Define the display property of the container

.box {display:-webkit-flex; / * webkit*/ display: flex;} / * inline flex*/ .box {display:-webkit-inline-flex; / * webkit*/ display:inline-flex;}

Container Styl

.box {flex-direction: row | row-reverse | column | column-reverse; / * Spindle Direction: left to right (default); right to left | Top to bottom | bottom to Top * / flex-wrap: nowrap | wrap | wrap-reverse; / * Line break: no line break (default) | Line break | Line break and * line is below * / flex-flow: | / * Spindle orientation and newline abbreviation * / justify-content: flex-start | flex-end | center | space-around; / * Spindle alignment: left alignment (default) | right alignment | Center alignment | alignment at both ends | average distribution * / align-items: flex-start | flex-end | center | baseline | stretch / * Cross axis alignment: top alignment (default) | bottom alignment | Center alignment | Top and bottom alignment | text baseline alignment * / align-content: flex-start | flex-end | center | space-between | space-around | stretch; / * Multi-spindle alignment: top alignment (default) | bottom alignment | Center alignment | up and down alignment and fullness | uniform distribution * /}

Child element attribute

.item {order:; / * sort: the smaller the value, the higher the ranking, the default is 0 / flex-grow:; / * default 0 zoom / / * Zoom in: default 0 (that is, if the value is 1, it is enlarged, 2 is double the size of 1, and so on) * / flex-shrink: / * default 1 * / / * Zoom out: default 1 (if the space is insufficient, the value will not be reduced to 0) * / flex-basis: | auto / * default auto * / / * fixed size: default is 0. You can set PX value or percentage size * / flex: none | [? |] / * flex-grow, abbreviations of flex-shrink and flex-basis. The default value is 0 1 auto,*/ align-self: auto | flex-start | flex-end | center | baseline | stretch. / * individual alignment: automatic (default) | Top alignment | bottom alignment | Center alignment | Top and bottom alignment and full alignment | text baseline alignment * /}

Compatible writing method

The first step is to define the display property of the container:

.box {display:-webkit-box; / * Old version syntax: Safari, iOS, Android browser, older WebKit browsers. * / display:-moz-box; / * Old version Syntax: Firefox (buggy) * / display:-ms-flexbox; / * mixed version Syntax: IE 10 * / display:-webkit-flex; / * New version Syntax: Chrome 21 + * / display: flex; / * New version Syntax: Opera 12.1, Firefox 22 + * /}

Since the old syntax is not included in the W3C standard, there is no need to write display:box here, and the following syntax is the same.

Also note here that if the child element is an inline element, in many cases you will use display:block or display:inline-block to turn the inline child element into a block element (for example, using the box-flex attribute), which is one of the differences between the old syntax and the new syntax.

Principal axis alignment of child elements

.box {- webkit-box-pack: center;-moz-justify-content: center;-webkit-justify-content: center; justify-content: center;}

Here, the old syntax has 4 parameters, while the new syntax has 5 parameters. Space-around compatible with the new syntax is not available:

.box {box-pack: start | end | center | justify; / * Spindle alignment: left alignment (default) | right alignment | Center alignment | left alignment * / justify-content: flex-start | flex-end | center | space-around; / * Spindle alignment: left alignment (default) | right alignment | Center alignment | alignment at both ends | average distribution * /}

Child element cross axis alignment

.box {- webkit-box-align: center;-moz-align-items: center;-webkit-align-items: center; align-items: center;}

Except for the different writing methods, the parameters here actually have the same function:

.box {box-align: start | end | center | baseline | stretch; / * Cross axis alignment: top alignment (default) | bottom alignment | Center alignment | text baseline alignment | alignment up and down and covered with * / align-items: flex-start | flex-end | center | baseline | stretch / * Cross axis alignment: top alignment (default) | bottom alignment | Center alignment | Top and bottom alignment and full alignment | text baseline alignment * /}

The display direction of the child element

The display direction of child elements can be realized by box-direction + box-orient + flex-direction. See the example below:

Left to right

Box {- webkit-box-direction: normal;-webkit-box-orient: horizontal;-moz-flex-direction: row;-webkit-flex-direction: row; flex-direction: row;}

Right to left

.box {- webkit-box-pack: end;-webkit-box-direction: reverse;-webkit-box-orient: horizontal;-moz-flex-direction: row-reverse;-webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

It is added here that the box-direction written in box only changes the order of the child elements, not the alignment. You need to add a new box-pack to change the alignment.

From top to bottom

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

Down to top

.box {- webkit-box-pack: end;-webkit-box-direction: reverse;-webkit-box-orient: vertical;-moz-flex-direction: column-reverse;-webkit-flex-direction: column-reverse; flex-direction: column-reverse;}

Whether to allow child elements to stretch or not

.item {- webkit-box-flex: 1.0;-moz-flex-grow: 1;-webkit-flex-grow: 1; flex-grow: 1;}

.item {- webkit-box-flex: 1.0;-moz-flex-shrink: 1;-webkit-flex-shrink: 1; flex-shrink: 1;}

The above allows magnification, in the box syntax, if box-flex is not 0, it means that the child element is allowed to stretch, while flex is separated, the upper flex-grow allows magnification (the default does not allow), and the lower flex-shrink allows zooming out (default allows). The default value of box-flex is 0, that is, by default, the performance is different in the two browsers:

There is another point here, that is, the algorithm of the old and new syntax is different. It is assumed that the value of box-flex is not equal to 0. In the old syntax, if there is extra space, the higher the value of box-flex, the greater the proportion of white space, and vice versa:

In the new syntax, the magnification is allocated directly according to the value of flex-grow, and the zoom of flex-grow will overwrite flex-shrink:0. See the example:

Parameters:

.item {box-flex:; / * scaling: * / flex-grow:; / * default 0 * / * Zoom in: default 0 (that is, if the remaining space is not zoomed in, a value of 1 is enlarged, 2 is double the size of 1, and so on) * / flex-shrink: / * default 1 * / / * Zoom out: default 1 (it will be reduced if the space is insufficient, 0 will not be reduced) * /}

Display order of child elements

.item {- webkit-box-ordinal-group: 1;-moz-order: 1;-webkit-order: 1; order: 1;}

At this point, I believe that you have a deeper understanding of the "Flex layout of new and old mixed writing analysis", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.