Box-flex, css3box-flex for flexible box model layout in css3

Box-flex, css3box-flex for flexible box model layout in css3

Box-flex: that is, let the sub-container divide the width and height attributes of the parent container according to certain rules.

Eg:

Html code:

<Div class = "wrap">

<Div class = "box1"> 01 </div>

<Div class = "box2"> 02 </div>

<Div class = "box3"> 03 </div>

</Div>

CSS style:

<Style type = "text/css">

Body, div {background: # fff; margin: 0; padding: 0 ;}

. Wrap {width: 600px; height: 200px; color: # fff; margin: 20px 0 0 20px; text-align: center;

Display:-moz-box; display:-webkit-box; display: box;

-Moz-box-orient: block-axis;-webkit-box-orient: block-axis;

-Moz-box-direction: reverse;-webkit-box-direction: reverse;

}

. Box1 {background: red;

-Moz-box-flex: 3;-webkit-box-flex: 3; box-flex: 3;

-Moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1; box-ordinal-group: 1;

}

. Box2 {background: green;

-Moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;

-Moz-box-ordinal-group: 3;-webkit-box-ordinal-group: 3; box-ordinal-group: 3;

}

. Box3 {background: blue;

-Moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2;

-Moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2; box-ordinal-group: 2;

}

</Style>

Preview effect:

 

Resolution:

First look at the attributes set in the parent Element

1. box-orient: block-axis; enables the sub-elements to be displayed vertically according to the block-level type;

2. box-direction: reverse; reverse the display sequence of child elements with default values;

Let's take a look at the attributes in the child element (this is a detailed introduction of the module marked with 01 text in the red area)

1. box-flex: 3. The sub-element is proportional to the stepless element. Globally, a total of six low-level elements are divided, and the red area accounts for 3/6, that is, 1/2 of the overall height shown in the figure;

2. box-ordinal-group: 1; defines a group for each sub-element, which is displayed according to the group size. The values are small and large, this should be a red top, blue center, and green bottom display, while a child element is defined in the parent element in the reverse rendering mode (box-direction: reverse ), that is, opposite to default;

Speaking of this, I think everyone is very open! Oh, of course, there are also questions. If you want to set a module as a fixed number, what proportion will the other modules display? Let's look at the example below the example (changed slightly from Example 1 ).

The static code remains unchanged, and the style is changed from the previous one:

<Style type = "text/css">

Body, div {background: # fff; margin: 0; padding: 0 ;}

. Wrap {width: 600px; height: 200px; color: # fff; margin: 20px 0 0 20px; text-align: center;

Display:-moz-box; display:-webkit-box; display: box;

-Moz-box-orient: block-axis;-webkit-box-orient: block-axis;

-Moz-box-direction: reverse;-webkit-box-direction: reverse;

}

. Box1 {background: red;

-Moz-box-flex: 3;-webkit-box-flex: 3; box-flex: 3;

-Moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1; box-ordinal-group: 1;

}

. Box2 {background: green;

Height: 100px;

-Moz-box-ordinal-group: 3;-webkit-box-ordinal-group: 3; box-ordinal-group: 3;

}

. Box3 {background: blue;

-Moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2;

-Moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2; box-ordinal-group: 2;

}

</Style>

Preview effect:

 

At this time, the height of the green module is fixed and set to 100, half of the parent element. From the preview, we can see that no matter which module, once a fixed width or height is set, the priority will be higher. Other modules are displayed in proportion based on previous ideas. It should be noted that the total width or height at this time has changed.

 

 

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.