3

Flexboxを使用して、WebKit ブラウザーで同じ高さの列を実現しています。

私はこのCSSを使用しています...

ol {
   display: -webkit-box;   
}

ol li {
   width: 100px;
   background: #ccc;
   margin: 5px;
   padding: 5px;    
}

...そしてこの HTML...

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, dolor sit amet, consectetuer.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
​

...を生成する...

例

jsFiddle .

ご覧のとおり、3 つの要素は、最も背の高い兄弟 (最初のli) の高さです。

最も高い要素を削除すると、他の要素が次に高い要素の高さになるリフローが発生することが予想されます。

私が期待したこと...

:)

実際どうなったんだ…

:(

興味深いことに、Web Inspector で要素の検査を開始すると、問題は自動的に修正されます。おそらく、ブラウザーの再描画を明示的にトリガーすることで、この自己修正を再現できますが、CSS で 100% 処理する必要があるものに JavaScript を導入する必要はありません。

兄弟要素が削除されたときにFlexboxに縮小/再計算するように指示する方法はありますか?

4

1 に答える 1

2

私はこれを理解しました...

liこれらの 2 つのプロパティを要素に追加します...

-webkit-box-flex: 1;
min-height: 0;

jsFiddle .

ここで、最初の要素を削除すると、他の要素が収まるように縮小されます。

于 2012-05-25T02:04:45.607 に答える