CSS box-Flex attributes, and then elastic box model Introduction

Document directory

• I. A faint greeting
• Ii. Box-Flex attributes (harmonious Edition)
• Iii. CSS box-Flex attributes (Incompatible version)
• 4. Dad is really amazing ~
• 5. Two missing attributes
• Vi. Application of actual points
• VII. References

A css3 Box Model article published by Zhang xinxu's blog, which has great practical value for me. I repeatedly opened this article and learned it. This time I decided to repost it to my blog!

I. A faint greeting

Yesterday, I strolled around 24 ways without wanting to work. In my CSS wish list, I saw a fresh CSS attribute, box-flex in the question. I have never seen it before, don't wonder, I don't know whether it's a scorpion or a horse, so I'm used to Google. I really don't know, I'm scared. This is not the property itself, but the property as a fuse, let me understand the new box model in css3-the flexible box model ). For Fluid layout control like mine, the appearance of such a box model is like playing a mahjong lever and opening up a bar to a hundred sides, which is exciting. In foreign countries, the elastic box model was mentioned, researched, and applied as early as last year. However, I only heard this concept for the first time now. It was really easy to learn it.

The content of this article is based on the previous method of smoothness. It directly uses the box-Flex attribute as the cutting entry, directly enters the base camp, and then expands the description.

Ii. Box-Flex attributes (harmonious Edition)

According to the youdao desktop dictionary, the word "flex" indicates "contraction" in Chinese. However, from the actual effect of this attribute, it seems very far-fetched to use the word "Contract. So here, simply put aside the literal meaning, we can regard "Box-Flex" as "house-allocation ". Box is the meaning of "box". We can understand it as a "House" with a very high price. "flex" refers to several "House Allocation" of brothers ".

Take a more practical example: Uncle Ma spent his whole life saving and finally bought a 150-square-meter commercial apartment in the suburbs of Shanghai. Later, Uncle Marin decided to allocate his house to his three sons as he wanted to go back to his hometown for elder care. OK, pause first. The "House" mentioned here is "box" in "Box-Flex", and "Allocation" is "flex" in "Box-Flex". Therefore, this "House Allocation" is called "Box-Flex", and the value of the box-Flex attribute is how to allocate and what is the proportion of distribution. Okay, let's continue with our example. Uncle Ma's three sons are called Dama, zhongma, and xiaoma. Among them, Dama has been married for many years, and there are a bunch of twin daughters, many people who drag their families to their mouths; zhongma and pony are outstanding bachelors. Therefore, Dama demanded that more houses be allocated. In the end, some family members had negotiated the following distribution results:

# Dama {house-allocation: 2 ;}# zhongma {house-allocation: 1 ;}# pony {house-allocation: 1 ;}

I think the allocation above should be easy to understand. The house is divided into a total of four parts, of which there is a big horse in the room to get two parts, and for the national province of rubber zhongma and pony each get one of them, so the Numerical Conversion is:
DAMA = 150*(2/(2 + 1 + 1) = 75 (square meter );
MA = 150*(1/(2 + 1 + 1) = 37.5 (square meter );
Pony = 150*(1/(2 + 1 + 1) = 37.5 (square meter );

If it is replaced with CSS, it means:

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

Wow, the meaning and function of Box-Flex are instantly blurred: used to allocate the width (or height) of the parent tag proportionally.

The value of Box-Flex is an integer of at least 1. However, a single box-Flex attribute is not enough to allocate space between sub-elements, because it depends on his father's meaning. The so-called, my father is Li Gang, hit people very arrogant; hate Dad is not just, hit people panic. Only Dad said, "you can allocate this House at will now ." Only children can be allocated.

Therefore, the parent element also needs to be added with the necessary declaration. This statement is:

#father { display: box; }

It may also be:

#father { display: inline-box; }

This statement seems to be saying: children, now I have turned this house into a situation where it can be freely distributed, non-fixed property. You can negotiate and allocate it by yourself.
display: box;The statement is actually the Statement of the elastic box model. The behavior and performance of the sub-elements under this statement are significantly different from those of the traditional Box Model in css2.

After all, it belongs to css3. Currently, only Firefox/Chrome/Safari supports the elastic box model (ie9 is unknown, and opera is not yet). When using it, a private prefix is required. Such as-moz-and-WebKit.

CSS instance
Now I want to instantiate the example CSS of the above Trojan house separation to see how it works on the web page: // zxx: the feeling of making a novel into a movie,

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 results are as follows:

As you can see, the boss Da Ma indeed allocated two copies of the house space, while the MA and the pony shared a share of the house space.

Click here: Box-Flex flexible layout test demo

Iii. CSS box-Flex attributes (Incompatible version)

Continue with the example of Uncle Marin's house separation. There was no problem with the three brothers and the harmony between them. The house was settled. However, all of a sudden, things go wrong. The old three pony suddenly had a tough girlfriend named a Feng. Pony himself does not care about the size of the house to be allocated. Even if two people live, the room of nearly 40 square meters is enough. Why hurt the kindness of the brothers for this. However, xiaoma's girlfriend, a Feng, was a person who could not afford to lose money and had to take a sigh of relief. As a result, he sought to increase the allocated area of his house.

In the view of Ma and zhongma, a Feng still belongs to outsiders and has no compromise on his brother's house. As a result, disputes continue. As a result, he becomes increasingly fierce, not open. So, one day, a Feng really couldn't help it. When cooking in the kitchen, he suddenly ran out with a kitchen knife and shouted: "No matter what, my pony would need a house of at least 50 square meters, I don't care about the rest. This is my bottom line. If it is lower, we won't discuss it !!" The horse and so on were scared by this posture, and finally the compromise: The pony is 50 square meters (even if the house is expanded to 50 square meters), the remaining area of the horse, ma 2-1 ratio redistribution. So there is:

# Dama {house-allocation: 2 ;}# zhongma {house-allocation: 1 ;}# pony {house-allocation: 50 m

2

; }

Adapted to a CSS script:

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

It is not hard to understand. When the sub-element has a width value, the width is fixed and the remaining space is allocated proportionally.
So, at this time, the size of the big horse house is: (150-50) * (2/(1 + 2) = 66.7 square meters, and the size of the house allocated by the middle horse is: (150-50) * (1/(1 + 2) = 33.3 square meters.

It is similar to the demo above to see how the sub-elements with fixed width elements are displayed.

The new CSS style is 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 results are as follows:

The old three gets 300 pixels in width, and the remaining 500 pixels in width are allocated in a ratio of between the old and the second.

You can click here: elastic layout demo with fixed width Elements

However, things are not over yet. After some time, I found that if all the big houses are private, there will be a lot of inconvenience in life. Therefore, we need to free up some public space to breathe in the room. What should we do? laosan xiaoma's girlfriend, a Feng, cannot survive or die. There is no way. lauma and zhongma can only sacrifice their own residential area as public space.

In response to CSS, the margin is increased, as shown in 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 results are as follows:

Boss, the second child space was squeezed at the same time, the boss is okay, the original proportion is high. It's just a pity that the second house is getting smaller and smaller. However, the patience of the second child is in harmony, and the sacrifices made are not in vain.

4. Dad is really amazing ~

Language tips: If you say "awesome" in Japanese, you often use "awesome" in cartoons. Nowadays, young people often use "awesome ", there is also a saying that "voice, and Voice" is a kind of praise, with a gentle tone.

Dad (parent label) under the elastic box model is actually very good, man, it should be like this, enough calm enough connotation.
The items in Dad's stomach are: Box-Orient, box-direction, box-align, box-pack, and box-lines. Now we will explain in sequence what the attributes of Box headers are.

Box-Orient
Box-Orient is used to determine the direction of child elements. Whether to move horizontally or vertically. Optional values:

horizontal | vertical | inline-axis | block-axis | inherit

Inline-axis is the default value. In addition, horizontal and inline-axis seem to have the same performance, so that sub-elements are arranged horizontally, while vertical and block-axis are also consistent, so that element columns are arranged.

I made a demo page for you to view the behavior and performance of each value. You can click here: Box-orient value test page

Switch the radio tab on the left of the demo page (If your browser is Firefox/Chrome/Safari), you can see the behavior of different box-orient attribute values. // Zxx: we can see that the display: box in Firefox will contract the outer box (a bit of display: inline-block), but chrome will not.

Box-direction
Box-direction is used to determine the sequence of sub-elements. Optional values include:

normal | reverse | inherit

Normal is the default value. The so-called normal order is the order in which we read and write text, from left to right, from top to bottom, the first element that appears above or left. Reverse indicates reverse. Originally, it should be 1-2-3 from left to right. The result shows 3-2-1.

For example, if we apply this attribute to the demo of House allocation at the beginning, the final display will be the following thumbnail-in reverse order:

The related 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 click here to display the demo in reverse order of the list

Box-align
Both box-align and box-pack determine how to use the remaining space in the box. In terms of behavior effects, it is represented as "alignment", which is consistent with some "alignment" in Adobe's software, such as the layer-alignment in makeup master Photoshop:

Box-align determines space utilization in the vertical direction, that is, alignment in the vertical direction. To facilitate memory, we can use the vertical-align implicit memory in css2. Both of them have "align", which are both vertical align; the remaining box-pack is in the horizontal direction.

Box has the following optional parameters:

start | end | center | baseline | stretch

Among them, stretch is the default value, which is to stretch, that is, the height of the parent label is too high, the height of the child element is high, // zxx: Do not worry about high layout in the future. Start indicates the top edge alignment, end indicates the bottom alignment, center indicates the center alignment, and baseline indicates the baseline (bottom edge of the English letter, such as O, M, and N) alignment.

To intuitively understand the effect of each value, I made a demo that allows you to view the effect in real time. You can click here: CSS box-align effect demo

Click the single-choice button group on the left of the demo to view the effect of each attribute value.

For example, if you select the "center" button, the following figure is displayed on the right of the result:

You can click to view the effects of other attribute values (non-ie browsers). The results are not displayed here.

Box-pack
Box-pack determines the use of the horizontal legacy space of the parent tag. The optional values include:

start | end | center | justify

For most behavior performances, the value of the text-align attribute is left | right | center | justify. However, the box-Pack does not use "Left", but "start ", this is because of the box-direction attribute, which can be used to reverse the original arrangement. After the original "Left alignment" is reversed, the result is "right alignment". At this time, "Left" is obviously not satisfactory, therefore, the use of "start" is more general, that is, alignment with the starting position of the parent tag, so as not to cause semantic and behavior problems.

"Start" is the default value of the box-pack attribute. Justify indicates the alignment between the two ends.

In order to conveniently and intuitively view the effects of each attribute value, I made a demo similar to the above. You can click here: Box-pack attribute value effect demo

The following is the thumbnail of the selected end:

It seems that in Firefox, justify does not respond and may not be supported yet. Chrome performs well.

Box-lines
Box-lines is used to determine whether the stator element can be displayed with line breaks? Even if the oil is squeezed out, it is displayed in a single row. Two optional values:

single | multiple

Single is the default value, indicating that life and death do not wrap, as shown in:

After setting box-lines: multiple, multiple lines are displayed. But I tested it myself. It seems that both Firefox and chrome do not know the box-lines: Multiple Attribute. Is it not supported for now?

Click here: a demo with no effect on line breaks

5. Two missing attributes

In addition to the box-Flex attribute, sub-elements also have two attributes: Box-Flex-group and box-ordinal-group. The role of Box-Flex-group is unknown, it seems that the browser does not support it currently; box-ordinal-group is used to pull the gangs. The preceding example shows how to divide a house by Uncle Ma Lin. Xiaoma's girlfriend, a Feng, does not stop, and his eyes show that the House of the Trojan Horse is much better than his own, and his mind is unbalanced. So he tried to win the horse and fight the house together. This "win-win" is the box-ordinal-group here. The target organization group has a digital level, which determines the location of your organization.

The smaller the value, the higher the position. It is hard to understand that the first group is at the beginning, the second group, and the third group... For example, the group of Box-ordinal-group: 1 is displayed in front of the group of Box-ordinal-group: 2. Therefore, we can use this attribute to change the sequence of sub-elements. For 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 related 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, the two elements whose class is "list_one" run to the front. As shown in:

You can click here: Box-ordinal-group Group Order Change demo

Vi. Application of actual points

If the address in your browser's Address Bar contains "www.zhangxinxu.com" and the browser is a newer Firefox/Chrome/Safari browser, you can find my application on this page.

Click it, and I will not sell it. I changed the display sequence of a relevant article, that is, a random article.

However, on the page where this article is located, the first random article is displayed (because likes do not support line breaks, it is displayed vertically ).

The related 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. References

• My CSS wish list
• The CSS 3 flexible Box Model
• Introducing the flexible box layout module
• -Moz-box-flex
• Flexible box layout module W3C working draft, 23 July 2009

Original address: http://www.zhangxinxu.com/wordpress? P = 1338