CSS Box-flex Properties, then elastic box model Introduction

CSS Box-flex Properties, then elastic box model Introduction

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=1338

One, the faint opening language

Yesterday, while I do not want to work time gap 24ways, in my CSS Wish list A article, saw a fresh CSS properties, is the title of the Box-flex, not seen before, Dayton doubts, do not know is a mule or horse, so habitual Google, it is not valley do not know, A valley is a fright. Instead of the property itself, this attribute is the fuse that gives me a look at the new box model in the next CSS3-The Elastic Box model (flexible box models). For me, this kind of fluid layout control, the appearance of this box model is like playing Mahjong bar on the side of the flower to the edge of seven, people excited. In foreign countries, elastic box models began to be mentioned, researched, and applied as early as last year. However, it is the first time that I have heard this concept, really a inattention on the out, learning this thing, sure enough lax.

This article describes the way of leaving the past, directly to the Box-flex attribute as the cut-in, straight into the base, and then spread the narrative.

Second, Box-flex properties (harmonious version)

Youdao Desktop dictionary shows that the word "flex" in Chinese has the meaning of "contraction". However, the effect of this property actually produces, no matter how to use the word "contraction" is very far-fetched. So, here, just throw away the literal meaning that we can interpret "Box-flex" as "house-allocation". box for the "box" meaning, we can understand the current price of the huge "house", "flex" refers to a few brothers "allocation of the house."

To give a more practical example: Marlin Uncle frugally for Life, finally in Shanghai suburbs bought a 150 square meters of commercial housing. Later, Uncle Marin wanted to return home for retirement, decided to assign the house to his three sons. OK, first pause, here refers to the "house" is "Box-flex" in the "box", "Distribution" is "Box-flex" in the "Flex", so, the "allocation of the House" action is called "Box-flex", And the value of the Box-flex property is how it is allocated, what is the allocation scale. OK, continue our example, Marlin uncle's three sons are called the Big Horse, the horse and the pony, among them the big horse has been married for many years, has a bunch of twin daughters, the telework, but the Chinese horse and Pony is the outstanding bachelor person. So, the big horse asked to allocate more houses, eventually, family consultations with the following distribution results are:

#大马 {House-allocation: 2;} #中马 {House-allocation: 1;} #小马 {House-allocation: 1;}

I think the allocation above should be easy to read. The house is divided into a total of 4, of which there is a family of the big horse divided into two of them, and for the national Province Rubber horse and pony each to share one, so the numerical conversion is:
Malaysia = 150 * (2/(2+1+1)) = 75 (sqm);
Medium horse = 150 * (1/(2+1+1)) = 37.5 (square meter);
Pony = 150 * (1/(2+1+1)) = 37.5 (sqm);

If you replace it with a CSS representation:

#first_boy {box-flex:2;} #second_boy {box-flex:1;} #three_boy {box-flex:1;}

Wow, Box-flex, the meaning and the role of the understanding instantaneous steady: the width (or height) space used to proportionally assign the parent tag.

Box-flex has a value of at least 1 for an integer when it works. However, just one Box-flex attribute is not enough to implement the spatial allocation between child elements, because it depends on what his father means. So-called, my father is Li Gang, hit people very arrogant, hate dad is not just, hit people flustered panic. Only dad said, "This House is now at your disposal." "Their children can be assigned.

Therefore, the parent element also needs to add the necessary declarations. This statement is:

#father {Display:box;}

It also seems to be:

#father {Display:inline-box;}

This statement seems to say: children, now that I have turned this House into a discretionary state, not a fixed property, you can negotiate your own assignment.
display: box;Statement is actually a statement of the elastic box model, the behavior and performance of the sub-elements under this declaration is significantly different from the performance of the traditional box model in CSS2.

After all, it belongs to CSS3, for now, only the Firefox/chrome/safari browser supports the elastic box model (IE9 unknown, Opera has not yet), and when used, it needs to be accompanied by a private prefix. such as-moz-,-webkit-.

CSS Instances
Now let's instantiate the example CSS on the Marin sub-house above, and see how it behaves on a Web page://zxx: There's a feeling of making a movie of a novel,

The main CSS code is as follows:

. test_box {    display:-moz-box;     Display:-webkit-box;     Display:box;         ... }. List {   ...}. List_one {    -moz-box-flex:1;     -webkit-box-flex:1;     Box-flex:1;}. list_two{    -moz-box-flex:2;     -webkit-box-flex:2;     Box-flex:2;}

The HTML code is as follows:

<div class= "Test_box" >    <div class= "list List_two" >1</div>    <div class= "List List_one" >2</div>    <div class= "list List_one" >3</div></div>

The result is the following thumbnail image:

From there, the eldest horse did allocate 2 of the house space, while the horses and ponies were evenly divided into a room.

You can really click here: Box-flex Flexible Layout Test Demo

Third, CSS Box-flex properties (non-harmonious version)

Continue the above example of the Uncle Marin Housing. Originally brother three people and harmony is a little problem is not, the house how to divide also basically have settled. Suddenly, however, things made waves. Old three pony suddenly had a sturdy girlfriend, called Fung. Pony himself to the size of the allocation of the House is not indifferent, even if two people live, nearly 40 square meters of the room is enough, why this thing hurt the kindness between brothers. However, Pony's girlfriend Fung is a loser, said what also want to contend for tone, so, find the horse in Malaysia, strong demand to increase their house allocation area.

In Malaysia, in the eyes of the horse, a Phoenix still belongs to outsiders, with what to their brother's house to dictate, so, there is no compromise, so, arguing constantly, so, intensified, so, full of. So, one day, Fung really suppressed, in the kitchen cooking when suddenly with a kitchen knife run out, loudly roar: "Anyway, my little horse to at least 50 square meters of the house, the rest of how the points are your things, I don't care, this is my bottom line, and then must not no discussion!! "Big horse and so was this posture frighten, finally still compromise: Pony on 50 square meters (even after the expansion of the house or 50 square meters), the remaining area of the horse, medium horse 2:1 proportion redistribution. So there are:

#大马 {House-allocation: 2;} #中马 {House-allocation: 1;} #小马 {House-allocation: 50m

2

; }

The adapted CSS script is:

#first_boy {box-flex:2;} #second_boy {box-flex:1;} #three_boy {width:50px;}

It is still not difficult to understand that when there is a width value in the child element, the element is fixed wide, and the remaining space is then proportionally allocated.
So, at this time, the size of the big horse's house is: (150–50) * (2/(1 + 2)) = 66.7 square meters, medium horse allocation house size is: (150–50) * (1/(1 + 2)) = 33.3 square meters.

Or a demo like the one above to see how the child elements that contain the fixed width element behave.

New CSS styles are as follows:

. list_w300 {width:300px;}

The HTML code is as follows:

<div class= "Test_box" >    <div class= "list List_two" >1</div>    <div class= "List List_one" >2</div>    <div class= "list list_w300" >3</div></div>

The result is the following thumbnail image:

Old three the width of 300 pixels, the remaining 500 pixel width of the eldest and the second 2:1 proportional distribution.

You can really click here: Flexible layout with fixed width element demo

However, things are not over yet. After some time, the brothers found that if all the rooms are private, there will be many inconveniences in life. So, we need to free up some public space and give the house a breath. What to do, old three pony's girlfriend Fung no compromise, no way, the old horse and the horse can only sacrifice their home area as a public space.

The response to the CSS, roughly, is to increase the margin spacing, the following HTML:

<div class= "Test_box" >    <div class= "list List_two" >1</div>    <div class= "List List_one" Style= "margin:0 30px; " >2</div>    <div class= "list list_w300" >3</div></div>

The result is the following thumbnail image:

Boss, the second space was squeezed at the same time, the boss is fine, the original proportion is high. Just pity two master visions, the place is getting smaller. However, the second's forbearance in exchange for harmony, the sacrifices did not be wasted.

Four, Dad is actually very powerful, said ~

Language tip: "strong" in Japanese words, animation is often used in the more elegant is "すごい", now young people commonly used is "スゲ", there is a saying "よくできるね" is a kind of praise, tone more gentle.

Elastic box Model of Dad (parent tag) is actually very goods, men, it should be so, enough calm enough connotation.
Dad's belly goods are: box-orient, box-direction, Box-align, Box-pack, Box-lines. Now, in turn, let's talk about what the box's properties are all about.

Box-orient
The box-orient is used to determine the direction of the child elements. Whether it is a row or a vertical walk. The optional values are:

Horizontal | Vertical | Inline-axis | Block-axis | Inherit

Where Inline-axis is the default value. and horizontal and Inline-axis appear consistent, let the sub-elements horizontal, and vertical and block-axis performance is consistent, let the element column.

I've made a demo page that allows you to see the behavior and performance of each value. You can really click here: Box-orient Value Action test page

Switch to the Radio tab on the left side of the demo page (if your browser is Firefox/chrome/safari), you can see the behavior of different box-orient property values. //zxx: The contrast shows that the display:box in Firefox shrinks the frame (a little display:inline-block), while Chrome doesn't shrink.

Box-direction
The box-direction is used to determine the order in which the child elements are arranged, and the optional values are:

normal | Reverse | Inherit

Where normal is the default value, which means it is arranged in the normal order. The so-called normal order, is that we look at the order of writing, from left to right, from top to bottom, the first appearance of the elements, on the top or left. and reverse that the reverse, originally from left to right should be the one, the results show that it is 3-2-1.

For example, if we apply this attribute to the demo on our first allocation house, the final display will be the following thumbnail-in reverse order:

The relevant CSS code is as follows:

. test_box {    display:-moz-box;     Display:-webkit-box;     Display:box;        -moz-box-direction:reverse;    -webkit-box-direction:reverse;    Box-direction:reverse;        ... }

You can simply click here: List Order reversal Show Demo

Box-align
Both Box-align and box-pack determine how the remaining space inside the box is used. The behavioral effect is "alignment", which is consistent with some "alignment" in Adobe's software, such as the layers in makeup master Photoshop-alignment:

The box-align determines the vertical direction of space utilization, which is the vertical alignment of the performance. In order to facilitate the memory, we can take and CSS2 in the Vertical-align insinuate memory, both have "align", are all vertical alignment, and the remaining box-pack is the horizontal direction.

The optional parameters of box are:

Start | End | Center | Baseline | Stretch

Where stretch is the default, for stretching, that is, the parent tag height is too high, the height of the child's element is much higher,//zxx: After the high-level layout of the worry. Start represents the top edge alignment, End is the bottom alignment, center is center aligned, and Baseline is aligned with the baseline (the bottom position line of the English letter O,m,n, etc.).

In order to intuitively know the effect of each value, I made a real-time view of the effect of the demo, you can click here: CSS box-align Value effect demo

Click the radio button group on the left of the demo to see the effect of each property value.

For example, with the "Center" radio button selected, the right side of the results appears as follows:

The effect of the various other property values you can click on your own (non-IE browser), here will not show the effect.

Box-pack
Box-pack determines the use of the parent tag's horizontal left-over space, with optional values such as:

Start | End | Center | Justify

For most of the behavior, the value of the Text-align attribute is the corresponding: left | Right | Center | Justify; However, the reason why Box-pack do not use "left", but "start" is because the Box-direction property, this thing can reverse the original arrangement, the original "right-aligned" inverted result is "align", at this point Obviously it is lied, so the use of "start" is more general, that is, the parent tag is aligned with the starting position, so as not to create semantic and behavioral problems.

Where "Start" is the default value for the Box-pack property, justify indicates justification.

To make it easy to visualize the effects of each property value, I've created a demo similar to the above, and you can click here: Box-pack Property Value Effect Demo

Below is the screen thumbnail of the selected end:

Seemingly found in the Firefox browser, justify is unresponsive, may not be supported. The Chrome browser is doing well.

Box-lines
Box-lines is used to determine if a child element can be displayed in a newline? Or even if the oil is extruded or single-line display. Two optional values:

Single | Multiple

Where single is the default value, which means that there is no newline, as shown in:

When Box-lines:multiple is set, multiple lines are displayed. However, I tested the next, seemingly now whether it is the Firefox browser or Chrome do not know the Box-lines:multiple attribute, is not support it, or what?

You can simply click here: Demo with no line-break effect

Five, two missing attributes

Child elements in addition to the Box-flex attribute, there are two properties, Box-flex-group and Box-ordinal-group, where the role of Box-flex-group is unknown, it seems that the current browser does not support The role of Box-ordinal-group is cliques. Or the above Marin uncle to split the example of the house. Pony girlfriend Fung again, eyes looked at the big horse House area than their own much better, in the mind imbalance, so, go to win the horse, together to play big horse house idea. This "wooing" is the box-ordinal-group here, and the organized gangs have a digital level that determines the location of your organization.

The smaller the number, the more forward the position, it is not difficult to understand, the first group in the front, followed by the second group, the third group ... For example, box-ordinal-group:1 groups are displayed in front of the Box-ordinal-group:2 group. Thus, we can use this property to change the order of the child elements. For example, the following example:
The HTML code is as follows:

<div class= "Test_box" >    <div class= "list List_two" >1</div>    <div class= "List List_one" >2</div>    <div class= "list List_one" >3</div></div>

The relevant CSS is as follows:

. list_one {    ...    -moz-box-ordinal-group:1;     -webkit-box-ordinal-group:1;     Box-ordinal-group:1;}. list_two{...    -moz-box-ordinal-group:2;     -webkit-box-ordinal-group:2;     Box-ordinal-group:2;}

As a result, two elements of the class "List_one" went to the front. As shown in the following:

You can click here: Box-ordinal-group group to change the sequence of the demo

Vi. Application of practical points

If you now have the word "www.zhangxinxu.com" in the address bar of your browser, and your browser is a newer Firefox/chrome/safari browser, you can find the app I made on this page.

I'm not selling suspense, I've changed the display order of the relevant articles in a certain place, that is, random articles.

However, on the page where this article is located, the first random article is shown (it is displayed vertically because it does not support line wrapping).

The relevant CSS code is as follows:

. similarity Ul{display:-moz-box; display:-webkit-box; display:box;-moz-box-orient:vertical;-webkit-box-orient: Vertical -o-box-orient:vertical; box-orient:vertical; }.similarity ul li{-moz-box-flex:1;-webkit-box-flex:1; box-flex:1;-moz-box-ordinal-group:2;- Webkit-box-ordinal-group:2; Box-ordinal-group:2;}. Similarity ul li:last-child{-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1; box-ordinal-group:1;}

Vii. Articles of Reference

• My CSS Wish List
• The CSS 3 flexible Box Model
• Introducing the flexible Box Layout module
• -moz-box-flex
• Flexible Box Layout Module working Draft, July 2009

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1338

(End of this article)

CSS Box-flex Properties, then elastic box model Introduction