Css 如何使div中的所有项宽度相等而不进行文本换行？

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

我曾尝试用flex box实现这一点

以下是我到目前为止的情况：

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>

按钮{
背景：黑色；
字体大小：1.2米；
宽度：32%；
颜色：白色；
填充顶部：11px；
填充底部：11px；
左侧填充：20px；
右边填充：20px；
边界半径：100px；
最小宽度：最小内容；
空白：nowrap；
弹性收缩：0；
柔性生长：1；
弹性基准：0；
文本对齐：居中；
}
.btn集装箱{
显示器：flex；
对齐项目：拉伸；
对齐内容：拉伸；
弯曲方向：行；
柔性包装：包装；
}
长文本按钮
按钮上有很长的文本
带文本的按钮

JavaScript是不需要的。您应该使用和更现代的方法来实现这一点

按钮{
背景：黑色；
宽度：100%；
字体大小：20px；
颜色：白色；
文本对齐：居中；
填充顶部：11px；
填充底部：11px；
左侧填充：20px；
右边填充：20px；
边界半径：100px；
空白：nowrap；
}
.btn容器{
显示：网格；
网格模板区域：“按钮1按钮2按钮3”；
宽度：100vw；
}
@仅介质屏幕和（最大宽度：750px）{
.btn容器{
网格模板区域：“按钮1”
“按钮2”
“按钮3”；
}
}

长文本按钮
按钮上有很长的文本
带文本的按钮

JavaScript是不需要的。您应该使用和更现代的方法来实现这一点

按钮{
背景：黑色；
宽度：100%；
字体大小：20px；
颜色：白色；
文本对齐：居中；
填充顶部：11px；
填充底部：11px；
左侧填充：20px；
右边填充：20px；
边界半径：100px；
空白：nowrap；
}
.btn容器{
显示：网格；
网格模板区域：“按钮1按钮2按钮3”；
宽度：100vw；
}
@仅介质屏幕和（最大宽度：750px）{
.btn容器{
网格模板区域：“按钮1”
“按钮2”
“按钮3”；
}
}

长文本按钮
按钮上有很长的文本
带文本的按钮

您拼错了

.btn容器的类名

。然后将flex direction更改为column，并删除

对齐项：拉伸

和

对齐内容：拉伸

然后卸下按钮

宽度：32%

现在检查一下，可以了

按钮{
背景：黑色；
字体大小：1.2米；
颜色：白色；
填充顶部：11px；
填充底部：11px；
左侧填充：20px；
右边填充：20px；
边界半径：100px；
最小宽度：最小内容；
空白：nowrap；
弹性收缩：0；
柔性生长：1；
弹性基准：0；
文本对齐：居中；
}
.btn容器{
显示器：flex；
弯曲方向：立柱；
}

长文本按钮
按钮上有很长的文本
带文本的按钮

您拼错了

.btn容器的类名

。然后将flex direction更改为column，并删除

对齐项：拉伸

和

对齐内容：拉伸

然后卸下按钮

宽度：32%

现在检查一下，可以了

按钮{
背景：黑色；
字体大小：1.2米；
颜色：白色；
填充顶部：11px；
填充底部：11px；
左侧填充：20px；
右边填充：20px；
边界半径：100px；
最小宽度：最小内容；
空白：nowrap；
弹性收缩：0；
柔性生长：1；
弹性基准：0；
文本对齐：居中；
}
.btn容器{
显示器：flex；
弯曲方向：立柱；
}

长文本按钮
按钮上有很长的文本
带文本的按钮

当发生文本换行以获得您所追求的结果时，您需要javascript有一种触发事件的方式来更改布局。查看我的答案当发生文本换行以获得您所追求的结果时，您需要javascript有一种触发事件来更改布局的方式。查看我的答案