Question

我希望这不是一个完全愚蠢的问题。我对使用flex和flex-wrap感到有些困惑。我有一堆按钮，应该都具有相同的高度和宽度。每个按钮应占用可用宽度的20％。并且取决于有多少个按钮，它们应该增长直到它们共享可用的高度。在此示例中，有10个按钮，但也可能有15个或更多。

这是我的代码：

<html>
<body style="margin: 0; padding: 0;">
    <div style="min-height: 100vh; display: flex; flex-wrap: wrap; flex-direction: row;">
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a<br/>b<br />c</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
        <div style="width: 20%;"><button style="height: 100%; width: 100%;">a</button></div>
    </div>
</body>
</html>

运行代码段时，您会看到，第一行按钮比第二行消耗更多的高度。原因似乎是多义线内容。但是，尽管有足够的空间来容纳文本内容，但为什么第一行按钮仍在增长？

希望您能帮助我。

谢谢。

弹性包装和按钮高度存在问题

0 个答案: