Introduced a new box of Css3 model – – Elastic box model, the model determines distribution of a box in the other box and how to deal with the space available. With the XUL (firefox user interaction language) similar to that of other languages also use the same box model, such as XAML, GladeXML. Using this model, you can easily create adaptive the fluid layout of the browser window or adaptive flexible layout of font size. The examples in this article use the following HTML code:

  code is as follows:  


<Body> <Div id="box1" > 1 </div> <Div id="box2 >" 2 </div> <Div id="box3 >" 3 </div> </body> Traditional box model based on HTML flow box arranged in the vertical direction. Using elastic box model can provide a specific order, also can be reversed. Set to open flexible box model, need to have child box box display attribute values for box (or the inline - box). Display: box; Horizontal or vertical distribution
code is as follows:


body {display: box; Box -orient: horizontal; }   Reverse distribution
code is as follows:


body {display: box; Box -orient: vertical; The box - direction: reverse; }
the specific distribution code is as follows:


body {display: box; Box -orient: vertical; The box - direction: reverse; # box1} {box - flex: 1; Box - ordinal - group: 2; # box2} {box - flex: 2; Box - ordinal - group: 2; # box3} {box - flex: 2; Box - ordinal - group: 1; } the box size# 0 - #


This concludes the body part