Question

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

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

我想将这些元素组合成网格图案，以便

按钮尺寸相同，并且具有固定的最小宽度
最大数量的按钮堆叠在每一行
按钮宽度已调整，以便每行完全填充
，#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>

这是codepen。

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

以响应的方式将元素拟合到网格中

2 个答案: