CSS3 introduces a new box model-the Elastic box model determines how a box is distributed in other boxes and how to handle the available space, and using this model, it is easy to create a mobile layout for adaptive browser windows or an adaptive font-size resilient layout
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 that adapts to the flow layout of the browser window or to the adaptive font size. The example in this article uses the following HTML code:
<body> <p id= "Box1" >1</p> <p id= "Box2" >2</p> <p id= "Box3" >3</p> </body >
The traditional box model arranges the boxes vertically, based on the HTML stream. A flexible box model can be used to specify a specific order or to reverse it. To turn on the elastic box model, simply set the Display property value for box (or Inline-box) with the sub-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 is displayed,
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 flow distribution. If it is a horizontal axis, it is distributed from left to right, while the vertical axis is distributed from top to bottom. If the attribute value for "box-direction" is defined as "reverse", the order in which the boxes are arranged is reversed.
body {display:box; box-orient:vertical; box-direction:reverse;}
Specific Distribution
The property "Box-ordinal-group" defines the order in which the box is distributed. It is possible to control its distribution order arbitrarily. These groups are defined as a number starting with "1", and the box model will first distribute the groups, all of which will be in each group. The distribution will be arranged from small to large.
body {display:box; box-orient:vertical; 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;}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. Box-flex How to divide the width of the parent container, three sub-blocks were set 1, 2, 2, that is, the parent container is divided into 5 parts, which occupy the parent structure width of 1/5 (100px), 2/5 (200px), 2/5 (200px). If the box is not resilient, it will be as wide as possible to make its contents visible without any overflow, and its size is determined by "width" and "height" (or min-height, Min-width, Max-width, Max-height).
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
