CSS:如何根据 sibling 的数量应用可变宽度

Question

我有一个容器元素，其中可能包含一个或两个同胞子元素。当只有一个 child 时，我希望它是父宽度的 100%。当有两个 child 时，我希望每个 child 都是 parent 宽度的 50%。 (如果我有三个，我希望每个宽度为 33%，等等)

有没有一种方法可以使用纯 CSS 解决方案来实现这一点，或者我是否必须使用 Javascript 来检测元素的数量，并相应地设置它们的样式？

DOM 结构可能如下所示:

<div class="container">
    <div class="element1"></div>
</div>

或者像这样:

<div class="container">
    <div class="element1"></div>
     <div class="element2"></div>
</div>

这是一个实验用的 fiddle :http://jsfiddle.net/Mx3ae/

Answer 1

解决这个问题的方法取决于您必须支持的浏览器。如果您需要支持旧版浏览器，您可能需要像 display: table-cell 这样的 hack，或者 javascript 方法。无论哪种方式，它都比应该的更难。

但是如果您可以使用现代的、常青的浏览器，新的 CSS Flexbox 规范会使这个问题变得微不足道。要在这种情况下使用它，您只需在 .container 元素上设置 display: flex;。然后，因为您希望内部元素扩展以占用任何可用空间，所以您需要使用 flex-grow 属性。在我的示例中，我设置了 flex-grow: 1; 以便它们都占用相同数量的剩余空间，但您可以使用不同的值，以便它们在多少剩余空间上有所不同他们消耗的剩余空间。参见 the fiddle .

这只是 Flexbox 的开始。您可以动态分配空间、重新排列元素的显示等等。我推荐 Chris Coyier 的 'Complete Guide to Flexbox'作为您的日常引用，尽管您可能还想搜索一些教程。

编辑:我不一定要把 display: table-cell 称为 hack。它实际上工作得很好，并且是规范预期的用途。如果您需要为旧版浏览器动态分配空间，或者即使 Flexbox 没有完全您想要的，请尝试一下。