Css3 introduces a new box model-elastic box model, which determines the distribution of a box in other boxes and how to process available space. This is similar to XUL (the user interaction language used by Firefox). Other languages also use the same box model, such as XAML and gladexml.
With this model, you can easily create an adaptive browser window flow layout or an auto layout of the adaptive font size. The example in this article uses the following HTML code:
<Body>
<Div id = "box1"> 1 </div>
<Div id = "box2"> 2 </div>
<Div id = "box3"> 3 </div>
</Body>
Traditional box models arrange boxes vertically Based on HTML streams. The elastic box model can be used to specify or reverse a specific order. To enable the elastic box model, you only need to set the value of the display attribute of the box with sub-boxes to box (or inline-box.
Display: box;
Horizontal or vertical distribution
Box-orient defines the coordinate axes of the distribution: vertical and horizional. These two values define how the box is displayed
Body {
Display: box;
Box-Orient: horizontal;
}
Reverse Distribution
"Box-direction" can be used to set the sequence in which the box appears. By default, you only need to define the distribution axis-box with the HTML stream distribution. If it is a horizontal axis, it is distributed from left to right, and the vertical axis is distributed from top to bottom. If the attribute value of "Box-direction" is "reverse", the order of the box is reversed.
Body {
Display: box;
Box-Orient: vertical;
Box-direction: reverse;
}
Specific Distribution
The "Box-ordinal-group" attribute defines the order of Box distribution. You can control the distribution order at will. These groups are defined by numbers starting with "1". The box model will first distribute these groups, and all these boxes will be in each group. The distribution is arranged in ascending order.
Body {
Display: box;
Box-Orient: vertical;
Box-direction: reverse;
}
# Box1 {
Box-ordinal-group: 2;
}
# Box2 {
Box-ordinal-group: 2;
}
# Box3 {
Box-ordinal-group: 1;
}
Box Size
By default, the box is not elastic. If the value of the box-Flex attribute is at least 1, it becomes elastic.
If the box is not elastic, it will make its content visible as wide as possible without any overflow, the size is determined by "width" and "height" (or Min-height, Min-width, Max-width, and Max-height ).
If the box is elastic, its size is calculated as follows:
If the box does not have any size declaration, its size will depend entirely on the size of the parent box. That is: the box size is equal to the size of the parent box multiplied by the percentage of its box-flex in the total box-flex of all child boxes (the size of the Child box = the size of the parent box * the box- flex/sum of Box-Flex values of all sub-boxes ).
If one or more boxes have a specific size statement, the size will be calculated, and the remaining elastic boxes will share the remaining available space according to the above principles.
Take a look at the example below to make it easier to understand.
All boxes are elastic.
In the following example, box1 is twice the box2 size, and box2 is the same as box3. It seems that the box size is defined by percentage, but there is a difference: the elastic box model is used to add a box without re-calculating its size.
Body {
Display: box;
Box-Orient: horizontal;
}
# Box1 {
Box-Flex: 2;
}
# Box2 {
Box-Flex: 1;
}
# Box3 {
Box-Flex: 1;
}
Some boxes have fixed sizes
In the following example, box3 is not elastic and the width is 160px. In this way, box1 and box2 have PX usable space. Therefore, the box1 width is 160px (240*2/3) and the box2 width is 80px (240*1/3 ).
Body {
Display: box;
Box-Orient: horizontal;
Width: 400px;
}
# Box1 {
Box-Flex: 2;
}
# Box2 {
Box-Flex: 1;
}
# Box3 {
Width: 160px;
}
Overflow Management
Because it is an elastic box, non-elastic box mixing, it is possible that the size of all the boxes is greater than or less than the size of the parent box. In this way, there may be too much space or insufficient space.
How to deal with too much space
The available space distribution depends on two attribute values: Box-align and box-pack.
The "Box-pack" attribute manages the horizontal spatial distribution. It has the following four possible attributes: Start, end, justify, or center.
The "Box-align" attribute manages the spatial distribution in the vertical direction. It has the following five possible attributes: Start, end, center, baseline, and stretch.
Body {
Display: box;
Box-Orient: horizontal;
Width: 400px;
}
# Box1 {
Box-Flex: 2;
}
# Box2 {
Box-Flex: 1;
}
# Box3 {
Width: 160px;
}
What should I do if I have insufficient space?
Like the traditional box model, the overflow attribute is used to determine the display mode. To avoid overflow, you can set box-lines to multiple to display line breaks.
The elastic box model looks good. Both gecko and WebKit have some trial tests on this model. Add-Moz and-WebKit before these attributes to use them. That is to say, Firefox, Safari, and chrome can use these features. Let's take a look at the demo of this elastic box model.
As a front-end developer, this model is very convenient for us to solve some common problems in webpage design, such as form layout, vertical center, visual separation of HTML streams, and so on. In the future, it will become a web standard. It is not a bad thing to get familiar with it early.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
