如何允许多个按钮在 div 中占据所有 space 而同时具有不同的文本？

Question

我在 div 中有 9 个带有文本的按钮。他们都有css，所以他们都占据了space的1/9。

div {
  border: 1px solid black;
  height:200px;
  width:200px;
  padding:0px;
}
button {
  width:calc(100% / 3);
  height:calc(100% / 3);
  border-radius:0px;
}

<div>
<button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button>
</div>

当他们有相同的文本时，他们工作得非常好，并给我你上面看到的想要的结果。

div {
  border: 1px solid black;
  height:200px;
  width:200px;
  padding:0px;
}
button {
  width:calc(100% / 3);
  height:calc(100% / 3);
  border-radius:0px;
}

<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>

当他们有不同的文字时，一切都会变得一团糟。我也试过使用 flexbox，但它只是让按钮填充了高度但包装不正确。

我想要的是一种在矩形 div 中放置 9 个按钮的方法，无论它们的文本是什么，它们始终是 div 大小的 1/9。我需要的另一件事是按钮可以缩放到 div，以防有人调整他们的屏幕大小或者我需要 div 的大小不同。如果您的解决方案使用 JS/Jquery，那没关系。

我不是 css 方面的专家。我怎样才能解决这个问题？有更好的方法吗？谢谢。

Answer 1

这可以使用 display: flex 和 flex-wrap: wrap:

div {
  border: 1px solid black;
  height:200px;
  width:200px;
  padding:0px;
  display: flex;
  flex-wrap: wrap;
}
button {
  width: 33.333%;
  height: 33.333%;
  border-radius:0px;
}

<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>

如何允许多个按钮在 div 中占据所有 space 而同时具有不同的文本？

How can I allow multiple buttons to take up all the space within a div while having different text?

html

javascript

css

button

flexbox