CSS3 introduces a new box model, the elastic box model, which determines how a box is distributed in other boxes and how to handle the available space. This is similar to XUL (the user interaction language used by Firefox), and other languages use the same box model, such as XAML, Gladexml.
With this model, you can easily create a flexible layout of the Adaptive browser window's flow layout or adaptive font size. The examples in this article use the following HTML code:
<body>
<div id= "Box1" >1</div>
<div id= "Box2" >2</div>
<div id= "Box3" >3</div>
</body>
The traditional box model arranges boxes in the vertical direction based on HTML streams. The elastic box model can be used to specify a particular order, or to reverse it. To open the elastic box model, simply set the property value of the display in the box with the Child box to box (or Inline-box).
Display:box;
Horizontal OR vertical distribution
"Box-orient" defines the axes of the distribution: vertical and horizional. These two values define how the box displays
body{
Display:box;
Box-orient:horizontal;
}
Reverse distribution
"Box-direction" can set the order in which the boxes appear. By default, you simply define the distribution axis--box with the HTML stream. If it is a horizontal axis, it is distributed from left to right, and the vertical axis is distributed from top to bottom. The value of the property defining "Box-direction" is "reverse", then the order of the boxes is reversed.
Body {
Display:box;
box-orient:vertical;
Box-direction:reverse;
}
Specific distribution
The property "Box-ordinal-group" defines the order in which the boxes are distributed. The distribution order can be controlled randomly. These groups are defined by a number starting with "1", and the box model will first distribute the groups, all of which will be in each group. Distribution will be arranged from small to large.
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 resilient, and if the Box-flex property value is at least 1 o'clock, it becomes resilient.
If the box is not elastic, it will be as wide as possible so that its contents are visible, and there is no overflow, the size of which is determined by "width" and "height" (or min-height, Min-width, Max-width, Max-height).
If the box is elastic, its size will be calculated in the following way:
If the box does not have any size declaration, its size will depend entirely on the size of the parent box. That is: the size of the box is equal to the size of the parent box multiplied by the percentage of its box-flex in the sum of all the Box-flex (the size of the child = the size of the parent box * The box-flex/of all the Box-flex values of the child box).
If one or more boxes have a specific size declaration, then their size will be computed, 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 the boxes are elastic.
In the following example, the Box1 is twice times the size of Box2, and the Box2 is the same size as box3. It looks as if the size of the box is defined as a percentage, but there is a difference: using the Elastic box model, add a box without having to recalculate its size.
Body {
Display:box;
Box-orient:horizontal;
}
#box1 {
Box-flex:2;
}
#box2 {
Box-flex:1;
}
#box3 {
Box-flex:1;
}
Some boxes have a fixed size
In the following example, the Box3 is not elastic, with a width of 160px, so that Box1 and Box2 will have 240px of available space. Therefore, the width of the box1 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 elastic box, inelastic box mixed row, it is possible that all boxes are larger or smaller than the size of the parent box. This makes it possible to have too much or less space.
Too much space to deal with
The distribution of available space depends on two attribute values: Box-align and Box-pack.
Property "Box-pack" manages the spatial distribution horizontally, with the following four possible properties: Start, end, justify, or center.
Property "Box-align" manages the spatial distribution in the vertical direction with the following five possible properties: 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 about the lack of space?
As with the traditional box model, the overflow property is used to determine how it is displayed. In order to avoid overflow, you can set Box-lines to multiple to make it appear wrapped.
The elastic box model looks good, and Gecko and WebKit have some tentative tests for the model. You can use this property by adding-moz and-webkit before these properties. That is to say, Firefox, Safari, Chrome can use these features, you can see the Elastic box model demo.
As a front-end developer, this model is very convenient for us to solve some common problems in web design, such as: Form layout, vertical center, visual separation of HTML stream, and so on. In the future it will become a Web standard and it is no bad thing to be familiar with it early.
More references
Original address: http://www.denisdeng.com/?p=938
Reprint Address: http://hacks.mozilla.org/ 2010/04/the-css-3-flexible-box-model/
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
