以响应方式将元素放入网格中

Question

考虑一个包含<button> 元素的<div> 元素：

<div id="box">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    ...
</div>

我想将这些元素放入一个网格模式中，这样

1. 按钮具有相同的尺寸并具有固定的最小宽度，
2. 每行堆叠最多的按钮，
3. 调整按钮宽度，使每一行都完全填满，
4. 当#box 调整大小时，此行为仍然存在。

有没有办法使用原生 HTML/CSS 功能（不使用 JavaScript）来做到这一点？我尝试使用新的 CSS Flexbox 布局：

#box {
    display: flex;
    width: 500px;
    height: 500px;
}

.button {
    flex: 1 1 auto;
    min-width: 40px;
    height: 40px;
}

但这不起作用..

感谢您的帮助！

Answer 1

正如您所怀疑的，您可以为此使用 CSS flex。

flex-wrap 是您所缺少的，以及使用百分比来进行响应。

#box {
  display: flex;
  flex-wrap: wrap;
}
#box > * {
  flex: 1 0 100px; /* each button should be at least 100px wide */
}

<div id='box'>
  <button class='button'>1</button>
  <button class='button'>2</button>
  <button class='button'>3</button>
  <button class='button'>4</button>
  <button class='button'>5</button>
  <button class='button'>6</button>
  <button class='button'>7</button>
  <button class='button'>8</button>
  <button class='button'>9</button>
  <button class='button'>10</button>
  <button class='button'>11</button>
  <button class='button'>12</button>
  <button class='button'>13</button>
  <button class='button'>14</button>
  <button class='button'>15</button>
  <button class='button'>16</button>
</div>

Answer 2

您可以轻松使用 CSS 网格布局。 我更喜欢它而不是 flexbox。

<div id='grid'>
      <button class='button'>1</button>
      <button class='button'>2</button>
      <button class='button'>3</button>
      <button class='button'>4</button>
      <button class='button'>5</button>
      <button class='button'>6</button>
      <button class='button'>7</button>
      <button class='button'>8</button>
      <button class='button'>9</button>
      <button class='button'>10</button>
      <button class='button'>11</button>
      <button class='button'>12</button>
      <button class='button'>13</button>
      <button class='button'>14</button>
      <button class='button'>15</button>
      <button class='button'>16</button>
</div>

<style>
  #grid {
    display: grid;
    grid: 50px / auto-flow;
  }
</style>

这是代码笔。

https://codepen.io/kenanbalija/pen/bYYarj