css - ディスプレイについての何か：-webkit-box; -webkit-box-flex：1

Question

状況を想像してみてください

divがあり、コンテナ内には3つのdivがあります。

また、内部のdivを自己適応させる必要がある場合もあります。

このような

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>
    <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?

Answer 1

フレキシブル ボックス レイアウトの目的を誤解しているようです。含まれている要素の未使用のスペースを取り、その子に追加することで機能します。たとえば、収容ボックスが 300px で、元々 80px、100px、60px の 3 つの要素がある場合、300-80-100-60 = 60px になります。次に、3 つの子要素の flex 値がすべて 1 の場合、それぞれに 60/(3*1) = 20px を割り当てます。そのため、子のサイズは 100px、120px、および 80px になりました。

あなたの例では、それらを同じサイズにしたいので、3 つの子すべてに対して -webkit-box-flex を 0 にする必要がありますが、幅 (または適切な場合は高さ) をそれぞれ 33.33% に設定します。

Answer 2

display: -webkit-box追加する必要があると思います.a div{-webkit-box-flex:1;height:100px}