Question

我的页面的底部有一个按钮面板。容器是一个flexbox，所有按钮排成一行，没有包装。这些按钮是<button>或<a>元素，它们具有图标和文本作为内容。现在，由于页面太窄而无法包含所有按钮，因此我想将按钮缩小到可用空间。仅最右边的按钮会缩小。并且当其宽度下降到某个阈值以下时，该按钮应仅折叠到图标上。然后，右边的下一个按钮将缩小。

我可以使用JavaScript来实现所有这些功能，但是我需要知道按钮的内容是否适合页面。无论我如何尝试，flexbox都不会超出其父div，但是按钮仍会绘制在其右端，因此flexbox永远不会比其容器宽。

这种方法在表格上效果很好。表的宽度总是和它们的内容一样大，即使它们的父表没有宽度也是如此。但是，flexbox似乎永远不会做到这一点。

如何使用JavaScript或jQuery代码找出flexbox所需的宽度是多少？这是容纳所有flexbox内容所需的宽度。

名称“所需宽度”来自Windows Forms或WPF，但似乎未在HTML中使用。因此，如果我需要更好的搜索词，请告诉我。

这是一个例子。 .container的宽度限制为200像素；就我而言，它仅限于页面宽度减去填充。

* {
  box-sizing: border-box;
}

.container {
  width: 200px; 
  background: azure;
  padding: 10px;
}

.buttons {
  background: bisque;
  padding: 10px;
  display: flex;
  white-space: nowrap;
}

.buttons button,
.buttons a {
  flex-shrink: 0;
}

<div class="container">
  <div class="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

Answer 1

经过大量尝试并偶然发现a similar question之后，这段代码似乎可以满足我的要求：

// Returns the total width of all children including their margins.
function childrenWidth(parent) {
    let contentWidth = 0;
    parent.children().each(function () {
        contentWidth += $(this).outerWidth(true);
    });
    return contentWidth;
}

let contentWidth = childrenWidth(flexBox);

这需要jQuery。

但是这样做也许也足够了，它会返回一个四舍五入的值：

// flexBox is a jQuery object
let contentWidth = flexBox[0].scrollWidth;

没有jQuery也可以。

我在最新版本的Firefox，Chrome和Edge上进行了测试。它在IE11中做了一些事情，尽管不尽相同。我不确定它是否与此代码有关。我对IE11的支持并未扩展到响应式布局，所以我现在对此表示满意。

确定弹性盒的所需宽度

1 个答案: