如何在没有文本换行的情况下使 div 中的所有项目宽度相等?

Question

我正在尝试创建一行三个按钮，其中所有按钮的宽度相等。 如果屏幕宽度变小，按钮应缩小以适合屏幕。 一旦文本开始在任何按钮上换行，我想将按钮的方向从水平切换到垂直。

我试图用弹性盒来实现这一点。

这是我到目前为止所拥有的：

button {
background: black;
font-size: 1.2em;
width: 32%;
color: white;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
min-width: min-content;
white-space: nowrap; 
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}
.btn-containter{
display: flex;
align-items: stretch;
align-content: stretch;
flex-direction: row;
flex-wrap: wrap;
}

<div class="btn-container">
<button onclick=test  type="button">button with long text</button>
<button onclick=test  type="button">button with really really long text</button>
<button onclick=test  type="button">button with text</button>
</div>

Answer 1

JavaScript 不需要。您应该使用@media和更现代的网格来实现此目的。

button {
background: black;
width: 100%;
font-size: 20px;
color: white;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
white-space: nowrap;
}
.btn-container {
display: grid;
grid-template-areas: "button1 button2 button3";
width: 100vw;
}
@media only screen and (max-width: 750px) {
.btn-container {
grid-template-areas: "button1"
"button2"
"button3";
}
}

<div class="btn-container">
<button onclick=test style="grid-area: button1" type="button">button with long text</button>
<button onclick=test style="grid-area: button2" type="button">button with really really long text</button>
<button onclick=test style="grid-area: button3" type="button">button with text</button>
</div>

Answer 2

您拼错了.btn-container的类名。然后将弹性方向更改为列并删除align-items:stretch和justify-content:stretch。

然后删除按钮width:32%。

现在检查它工作正常

button {
background: black;
font-size: 1.2em;
color: white;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
min-width: min-content;
white-space: nowrap; 
flex-shrink: 0;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}
.btn-container{
display: flex;
flex-direction: column;
}

<div class="btn-container">
<button onclick=test  type="button">button with long text</button>
<button onclick=test  type="button">button with really really long text</button>
<button onclick=test  type="button">button with text</button>
</div>