Home > Developer > Web Develop
Just start to do the Web page there is a confusion, why Display:block can only vertical arrangement, if you want to use the horizontal arrangement of float:left and other ways. The hardest thing about this method is, of course, that when the number of child elements changes, it is necessary to modify the width of the child elements to make it fit again. Bootstrap for compatibility when implementing a raster layout, you have to generate a lot of code like this:
{ float: left;} { width: 100%;} { width: 91.66666667%;} { width: 83.33333333%;}Fortunately there is less, so that the code is greatly reduced, such as:
{ [email protected]{class}[email protected]{index} { width: Percentage ((@index/@grid-columns)); } { . Calc-grid-column (@index, @class, @type); Next Iteration loop-grid-columns ((@index-1), @class, @type);}And CSS3 gives a direct solution, that is display:box. Of course, this CSS3 attribute, like most without direct browser support, requires a browser prefix in front of the box.
Give the initial code.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>html, Body{Height:100%;margin:0; }Body{background:Black; }article{Display:-webkit-box;Height:100%; }Article Div{ }article Div:nth-child (1){background:Red; }article Div:nth-child (2){background:Green; }article Div:nth-child (3){background:Blue; } </style></Head><Body> <article> <Div>123</Div> <Div>Abc</Div> <Div>Tarol</Div> </article></Body></HTML>
Open chrome and get the effect
The first comparison differs from the traditional display:block:
It seems that the vertical arrangement of the Display:block is converted to the horizontal arrangement of the Display:box. But the Display:box is more powerful, and the above three behaviors can be controlled independently of each other.
Article { display:-webkit-box; height:100%; /* Note the property prefixed by this prefix, preceded by the value*/ -webkit-box-orient:vertical;}：Article Div:nth-child (1) { background:red; -webkit-box-flex:1;}：
Set the ' elasticity ' of all the child elements to 1, as the elasticity of everyone, so the width of the same
Article div { -webkit-box-flex:1;}：
The ' elasticity ' of the first child element is set to 2, the other remains 1 unchanged, because the first child element's ' elasticity ' is twice times the other child elements, so the placeholder is twice times the other child elements. is to put the father's property into 4, the eldest brother exclusive 2, the second and old three each have 1 copies.
Article Div:nth-child (1) { background:red; -webkit-box-flex:2;}：
At first glance is right, but everything is afraid of serious fanjian two words. Open F12, looked at the width, the second and the old 31 is 344px, the other is 359px. (Dick: Just because I'm a dick).
Where is the reason? Out of the innerHTML of the element, one is ABC three characters, and the other is Tarol five characters. Like a spring, the elasticity is the same, but one is two more than the other, the length of the stretching can be the same? The process is to add all the child elements that are assigned to the Box-flex property:width:0
Article div { -webkit-box-flex:1; width:0;}Now the contrast, the discovery is the same, or there are 1px differences (dad: We a steel coins do not chop into two pieces)
Article > Div:nth-child (1) { background:red; -webkit-box-ordinal-group:2;} Article > Div:nth-child (2) { background:green; -webkit-box-ordinal-group:3;} Article > Div:nth-child (3) { background:blue; -webkit-box-ordinal-group:1;}：
Box-flex-group, acting on child elements , sets the grouping of ' elastic ' functions for child elements. The default is 1, which is the first group.
Assigns a value of 2 to the box-flex-group of the first element
Article > div { -webkit-box-flex:1; width:0;} Article > Div:nth-child (1) { background:red; -webkit-box-flex-group:2;} Article > Div:nth-child (2) { background:green;} Article > Div:nth-child (3) { background:blue;}The effect was shocking, the eldest brother disappeared:
Because the definition of box-flex-group is such that the parent element is first assigned to the space required by a child element with a large ordinal number, and then all the remaining space is given to the small sub-elements of the group to ' play '.
That is, Dad's property boss how much to give, the rest of the other people to divide, the boss how much? He said: I do not want anything (width:0), so no more. (Boss: I didn't say it.)
Modify the width of the first child element
{ background: Red; -webkit-box-flex-group: 2; width: 200px;}The effect is as follows:
The eldest brother said again: "Mother Egg has this kind of good, that I want all!"
{ background: Red; -webkit-box-flex-group: 2; width: 100%;}And then:
Then he was beaten.
Every time I write an article, there is always a feeling like missing something. Year is over, also one months has not been updated, this article as a start.
CSS3 Elastic Box Model Display:box
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
