如何讓flexbox尊重移除的元素？

我使用Flexbox在WebKit瀏覽器中實現了高度相等的列。如何讓flexbox尊重移除的元素？

我使用這個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。

正如你所看到的，三個元素是他們最高的兄弟姐妹的身高（第一個li）。

如果我刪除了最高的元素，我希望有一個迴流，其中的其他元素成爲下一個最高元素的高度。

我的預期是什麼？

實際上發生了什麼事......

作爲一個有趣的注意，當你開始檢查Web檢查的元素時，問題糾正自己。也許我可以通過顯式觸發瀏覽器重繪來重現這個自我更正，但是我寧願不必爲CSS中的100％處理引入JavaScript。

有沒有辦法告訴Flexbox收縮/重新計算時，兄弟元素被刪除？

來源

2012-05-25 alex

我想通這一個...

這兩個屬性添加到li元素...

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

jsFiddle。

現在，當您刪除第一個元素時，其他元素會縮小以適合其他元素。

來源

2012-05-25 02:04:45 alex

如何讓flexbox尊重移除的元素？

回答

相關問題