These days in the mobile Web development, encountered some problems, before the toss over this aspect of things, this time well absorbed under
CSS3 's flexbox--Elastic box model, this box model determines how a box is distributed in other boxes and how to handle the available space.
Pros: You can easily create an adaptive browser window with a mobile layout or an adaptive font-size elastic layout.
1 <Body>2 <DivID= "Box1">1</Div>3 <DivID= "Box2">2</Div>4 <DivID= "Box3">3</Div>5 </Body>
1, open the Elastic box model way: Display:box;
"Horizontal OR vertical distribution"
{ display: box; box-orient: horizontal; }"Reverse Distribution"
{ display: box; box-orient: vertical; box-direction: reverse; }"Specific Distribution"
/* Box-ordinal-group: Defines the order (number) of the distribution of the box, distributed from small to large */ { display: box; Box-orient: vertical; : reverse;} { box-ordinal-group: 2;} { box-ordinal-group: 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. 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). If the box is elastic, its size will be calculated as follows: 1. Specific size declarations (width, height, min-width, min-height, Max-width, Max-height); 2. The size of the parent box and all remaining available internal space if the box does not have any size declaration, then 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 sub-boxes Box-flex (the size of the child box = the size of the parent box * The sum of the Box-flex values of the box-flex/of all the child boxes). If one or more boxes have a specific size declaration, then their size will be counted, and the rest of the elastic boxes will share the rest of the available space according to the above principles. Take a look at the following example to make it easier to understand. All boxes are elastic. In the following example, Box1 is twice times the size of Box2 and Box2 is the same size as box3. It looks as if the box size is defined as a percentage, but there is one difference: using the Elastic box model, add a box without recalculating 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."
/*formula: The size of the child box = the size of the parent box * The Box-flex value of the box-flex/of all the sub-boxes and the following example, Box3 is not elastic, the width is 160px, so box1 and Box2 will have 240px of available space. Therefore, the width of the box1 is 160px (240*2/3) and the width of the box2 is 80px (240*1/3). */Body{Display:Box;box-orient:Horizontal;width:400px;}#box1{Box-flex:2;}#box2{Box-flex:1;}#box3{width:160px;}
"Too much space to deal with"
/*the distribution of available space depends on two attribute values: Box-align and Box-pack. The property "Box-pack" manages the spatial distribution in the horizontal direction, with the following four possible attributes: Start, end, justify, or center. 1. Start all boxes on the left side of the parent box, the remaining space on the right side; 2. End all boxes on the right side of the parent box, the remaining space on the left; 3. The remaining space in the justify is evenly distributed between the boxes; 4. Center's available space is evenly distributed on both sides of the parent box. The attribute "Box-align" manages the spatial distribution in the vertical direction, with the following five possible attributes: Start, end, center, baseline, and stretch. 1. Start each box is arranged along the top edge of the parent box, and the remaining space is at the bottom; 2. End each box is arranged along the lower edge of the parent box, and the remaining space is at the top; 3. Center free space allocated evenly, half above, half below; 4. Baseline all boxes are arranged along their baseline, and the remaining space can be previously available; 5. Stretch height of each box is adjusted to fit the height of the parent box*/Body{Display:Box;box-orient:Horizontal;width:400px;}#box1{Box-flex:2;}#box2{Box-flex:1;}#box3{width:160px;}
"What about space shortage?"
As with the traditional box model, the overflow property is used to determine how it is displayed. To avoid overflow, you can set Box-lines to multiple to make it line-break display.
The elastic box model looks good, and Gecko and WebKit have some tentative tests on 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.
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 centering, visually separating HTML streams, and so on. In the near future it will become a web standard, and familiarity with it early is not a bad thing.
The content has been modified and organized: for the Watercress sharing platform
More about CSS Flex boxes: more
Flexbox Elastic 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
