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 ).
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
