并排的两个按钮，如果删除其中一个，则另一个将填充 100% 宽度

Question

我正在使用 Bootstrap，我知道如何使按钮并排显示，但在实现我想要的效果时遇到问题。

当按钮并排放置在 100% 宽度的容器中时，一切都很好。但是，如果第二个按钮被删除，我希望第一个按钮填充 100%。

有没有纯 CSS 的方法？

Answer 1

当按钮并排放置在 100% 宽度的容器中时，一切都很好。但是，如果其中一个按钮消失，我希望另一个按钮填充 100%。

有没有纯 CSS 的方法？

是的。您可以使用CSS Flexboxflex-grow的属性轻松完成此任务。

来自MDN：

CSSflex-grow属性指定 Flex 项目的 Flex 增长因子。它指定项目应占用 Flex 容器内的空间量。

基本上，您可以告诉一个元素占据所有可用的宽度。因此，如果有两个元素，它们将平均共享空间。如果删除一个元素，另一个元素将扩展以填充宽度。

以下是完成这项工作所需的所有代码：

超文本标记语言

<div id="container">
    <button type="button">Button 1</button>
    <button type="button">Button 2</button>
</div>

CSS（相关部分）

#container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 75px;
}

button {
   flex-grow: 1; /* this one line tells button to stretch across all available width */
}

DEMO（点击按钮效果）：http://jsfiddle.net/rjy6nvj2/1/

注意：除 IE 8 和 9 之外，所有主要浏览器都支持 Flexbox 。