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

...产生...

例子

js小提琴。

如您所见，这三个元素是它们最高兄弟（第一个li）的高度。

如果我删除了最高元素，我希望会有一个回流，其中其他元素成为下一个最高元素的高度。

我所期待的...

:)

究竟发生了什么...

:(

有趣的是，当您开始在 Web Inspector 中检查元素时，问题会自行纠正。也许我可以通过显式触发浏览器重绘来重现这种自我纠正，但我宁愿不必为应该在 CSS 中 100% 处理的内容引入 JavaScript。

当兄弟元素被移除时，有没有办法告诉 Flexbox 收缩/重新计算？

4

1 回答 1

2

我想出了这个...

将这两个属性添加到li元素...

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

js小提琴。

现在，当您删除第一个元素时，其他元素会缩小以适应。

于 2012-05-25T02:04:45.607 回答