Use of Box-flex in CSS3

Grammar:

Box-flex:<number>

Where number is used to specify the proportion of the remaining space allocated by the object to its parent, using floating-point numbers.
Sets or retrieves how the child elements of a telescopic box object allocate their remaining space.

HTML code:

<ulID= "box">    <Li>A</Li>    <Li>B</Li>    <Li>C</Li></ul>

CSS code:

#box{Display:Box;width:240px;Height:100px;margin:0;padding:10px;List-style:None;Display:-webkit-box;Display:-moz-box;Display:-ms-box}#box li:nth-child (1){Box-flex:1;}#box Li:nth-child (2){Box-flex:1;}#box Li:nth-child (3){Box-flex:2;}

上面代码请自行加上-moz-,-webkit-之类的。box-flex生效需定义其父元素display为box或inline-box

Myth: Note that Box-flex only dynamically allocates the remaining space of the parent element, not the entire parent element's space. As the above example, the parent element #box width is 240px, if you think the width of a,b,c is 60, 60, 120 is wrong, because Box-flex just allocates the remaining space of the parent element, so a,b,c should be divided into the content of the remainder of the width

In order to clear the so-called residual space allocation, the above example slightly modified, HTML code unchanged
CSS code:

#box{Display:-webkit-box;Display:-moz-box;Display:-ms-box;background:#000;width:240px;Height:100px;margin:0;padding:10px;List-style:None;vertical-align:Top;}. Box Li{width:50px;padding:7px;}#box li:nth-child (1){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#666;}#box Li:nth-child (2){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#999;}#box Li:nth-child (3){-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2;background:#ccc;}

From the above code, we can know that the width of the a,b,c is 50+7*2=64px, three plus that is 192px, so the remaining 240-192=48px is the parent element of the rest of the space, so a,b,c according to the set 1:1:2 to allocate this 48px,a divide 12px, B got a 12px,c of 24px, so the final a=64+12=76px,b=64+12=76px,c=64+24=88px

Compatibility:

See the Rainbow after the rain

Source: http://www.cnblogs.com/moqiutao/

If you feel that this article is helpful to your study, please support and encourage more.

Use of Box-flex in CSS3