something about display:-webkit-box; -webkit-box-flex:1

Try to imagine a situation

there is a div and inside the container there are three divs ,

and sometimes we need to let the inside divs self-adaption.

like this

css:

.a{display:-webkit-box;width:300px;height:100px;background:#222}
.a div{-webkit-box-flex:1;height:100px}
.a-1{background:red}
.a-2{background:yellow}
.a-3{background:blue}

html:

<div class="a">
    <div class="a-1">abc</div&g开发者_开发知识库t;
    <div class="a-2">abcdddd</div>
    <div class="a-3">abcdddddddde</div>
</div>    

but a-1 ,a-2 , a-3 do not self-adaption .i mean a-1 a-2 a-3 do not equal in length. it seems also depends on the text length.

how solve?

---

Looks like you have misunderstood the purpose of the flexible box layout. It works by taking the unused space in the containing element and adding into its children. So for example if your containing box is 300px, and you have three elements originally 80px, 100px, and 60px, then you have 300-80-100-60 = 60px. Then if your three child elements all have a flex value of 1 then it allocates 60/(3*1) = 20px to each. So the child sizes are now 100px, 120px, and 80px.

For your example, as you want them equal sizes, you should make the -webkit-box-flex to 0 for all three children, but set their width (or height if appropriate) to 33.33% each.

---

I have occasions where I do not know the number of elements that will be within an element, but I still want them to be layed out evenly. For instance if I had 3 elements their width would be 33%, but for 4 elements the width would be 25%. To get around this I set the width to 1% first, then set flex to 1.

.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

.flex-element {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
width: 1%;
}

---

I think you need to add display: -webkit-box to .a div{-webkit-box-flex:1;height:100px}