Html 使用flexbox创建一行响应性可包装的按钮

我试图使一排按钮响应。行中可以有3个或2个按钮。我之所以认为flexbox（或者网格）是解决方案，是因为按钮中的文本是国际化的，语言会有所不同，这意味着它们将根据按钮中的文本而不仅仅是屏幕宽度进行包装，所以我不能只写与屏幕宽度对应的媒体查询

这些是没有包装的初始状态： 开始状态（无环绕）为以下任一图像（取决于2个或3个按钮）：

当容器变得太小时，以下是所需的包装状态：

我创建了一个小提琴，允许您调整长方体的宽度，并在此处切换可选按钮：

这是开始的html，但是将前两个按钮包装在一起可能会有所帮助

    <div class="container">
      <div class="button button1">
        This is a longer button
      </div>
      <div class="button button2">
        Optional Button
      </div>
      <div class="button button3">
        Confirmation button
      </div>
    </div>
    <button class="width-button">Toggle width</button>
    <button class="toggle-button-button">Toggle optional button</button

>

这是一个较长的按钮
可选按钮
确认按钮
切换宽度
切换可选按钮

如果您的布局是固定的，并且您真的在使用

窄类，您可以这样做


document.querySelector（'.width按钮'）.addEventListener（'click'，（）=>{
document.querySelector（'.container'）.classList.toggle（'shown'）；
});
document.querySelector（'.toggle button'）。addEventListener（'单击'，（）=>{
document.querySelector（'.button1'）.classList.toggle（'hide'）；
});
.container{
宽度：580px；
背景颜色：浅灰色；
利润率：40px0；
填充：12px；
过渡：宽200ms，易于进出；
显示器：flex；
柔性包装：包装；
}
.集装箱{
宽度：320px；
}
.按钮{
填充：12px；
背景颜色：绿色；
显示：内联块；
边界半径：8px；
保证金：5px
/*演示*/
}
.按钮1.隐藏+按钮2{
显示：无；
}
.按钮3{
左边距：自动；
}
.容器.窄.按钮1.隐藏，
.容器.窄.按钮3{
弹性：0.100%；
}

这是一个较长的按钮
可选按钮
确认按钮
切换宽度
使用flexbox切换可选按钮和idea。调整两个容器的大小以查看结果


.container{
宽度：480px；
背景颜色：浅灰色；
利润率：40px0；
填充：12px；
溢出：隐藏；
调整大小：水平；
显示器：flex；
柔性包装：包装；
z指数：0；
位置：相对位置；
}
.按钮{
填充：12px；
背景颜色：绿色；
显示：内联块；
边界半径：8px；
保证金：2倍；
位置：相对位置；
}
.按钮3{
弹性增长：1；/*在包裹上增长*/
顺序：2；/*放在伪元素之后*/
}
/*这将按下确认按钮
并将完成包装上的第一个按钮*/
.容器：：之后{
内容：“；
flex grow:999；/*按最后一个按钮*/
弹性基准：1px；
背景：绿色；
边界半径：8px；
位置：相对位置；
保证金：2PX2PX2PX-20px；
z指数：-3；
}
/*在第一行上的确认按钮时隐藏伪元素*/
.按钮3：：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
右：100%；
宽度：100vw；
背景：浅灰色；
}
/*确保按钮区域足够大，可用于活动*/
.按钮：：之后{
内容：“；
位置：绝对位置；
z指数：-2；
排名：0；
底部：0；
左：100%；
宽度：100vw；
}

这是一个较长的按钮
可选按钮
确认按钮
这是一个较长的按钮
可选按钮
确认按钮
很抱歉。窄类只是我应用于容器以显示一个可以调用按钮的宽度的东西，它不是我可以实际使用的东西。我在问题中提到，根据查看应用程序的语言，按钮将具有不同的宽度，因此文本换行以不同的宽度进行，因此无法进行媒体查询。我将更新这个问题，以澄清.窄类只是为了显示较小的状态。我刚刚更新了fiddle，以便对
窄类
进行注释。很抱歉造成混淆。@jmancherje我已经更新了答案，使每个按钮的
auto
宽度。我仍然认为您需要使用媒体查询来完成此任务。您可能是对的，谢谢@jmancherje我已经用一个媒体查询解决方案更新了答案，看一看，请记住使用的断点是随机的，所以最好使用适合您的断点。不需要调整大小，没有任何变化。仅当
宽度
发生更改时有效，并且第二个示例不起作用。第一个示例都不是，因为OP希望按钮具有
auto
宽度，但宽度不同