使用 flexbox 创建响应式可包装的按钮行

Question

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

这些是没有包装的初始状​​态： 起始状态（无换行）是以下任一图像（取决于 2 或 3 个按钮）：

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

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

See Fiddle here to test each variant

这是开始的 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

>

Answer 1

如果您的布局是固定的，并且您确实在使用 .narrow 类，您可以这样做，

document.querySelector('.width-button').addEventListener('click', () => {
  document.querySelector('.container').classList.toggle('narrow');
});

document.querySelector('.toggle-button-button').addEventListener('click', () => {
  document.querySelector('.button1').classList.toggle('hide');
});

.container {
  width: 580px;
  background-color: lightgray;
  margin: 40px 0;
  padding: 12px;
  transition: width 200ms ease-in-out;
  display: flex;
  flex-wrap: wrap;
}

.container.narrow {
  width: 320px;
}

.button {
  padding: 12px;
  background-color: green;
  display: inline-block;
  border-radius: 8px;
  margin: 5px
    /* demo */
}

.button1.hide+.button2 {
  display: none;
}

.button3 {
  margin-left: auto;
}


.container.narrow .button1.hide,
.container.narrow .button3 {
  flex: 0 100%;
}

<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>

否则，您可以使用媒体查询更改 .narrow 类，如下所示：

document.querySelector('.toggle-button-button').addEventListener('click', () => {
  document.querySelector('.button1').classList.toggle('toggle');
});

body {
  margin: 0
}

.container {
  width: 100%;
  background-color: lightgray;
  margin: 40px 0;
  padding: 12px;
  box-sizing: border-box;
  transition: width 200ms ease-in-out;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 600px) {
  .container {
    justify-content: flex-start
  }
}

.button {
  padding: 12px;
  background-color: green;
  display: inline-block;
  border-radius: 8px;
  /* demo */
  margin: 5px;
}

.toggle+.button2 {
  display: none;
}

.button1.toggle {
  flex: 1;
}

@media (min-width: 600px) {
  .button1.toggle{
    flex: 0 auto;
  }
}

.button3 {
  flex: 0 100%;
}

@media (min-width: 600px) {
  .button3 {
    margin-left: auto;
    flex: 0 auto;
  }
}

<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="toggle-button-button">Toggle optional button</button>

Answer 2

以及使用 flexbox 的想法。调整两个容器的大小以查看结果

.container {
  width: 480px;
  background-color: lightgray;
  margin: 40px 0;
  padding: 12px;
  overflow:hidden;
  resize:horizontal;
  display:flex;
  flex-wrap:wrap;
  z-index:0;
  position:relative;
}


.button {
  padding: 12px;
  background-color: green;
  display: inline-block;
  border-radius: 8px;
  margin:2px;
  position:relative;
}

.button3 {
  flex-grow:1; /* grow on wrap  */
  order:2; /* put after the pseudo element*/
}

/* this will push the confirmation button 
and will complete the first button on wrap */
.container::after {
  content:"";
  flex-grow:999; /* push the last button */
  flex-basis:1px;
  background:green;
  border-radius:8px;
  position:relative;
  margin:2px 2px 2px -20px;
  z-index:-3;
}

/* hide the pseudo element when confirmation button on the first row */
.button3::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  right:100%;
  width:100vw;
  background:lightgray;
}

/* make sure the button area is big enough for the events*/
.button::after {
   content:"";
   position:absolute;
   z-index:-2;
   top:0;
   bottom:0;
   left:100%;
   width:100vw;
}

<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>

<div class="container">
  <div class="button button1">
    This is a longer button
  </div>
  <div class="button button2" style="display:none;">
    Optional Button
  </div>
  <div class="button button3">
    Confirmation button
  </div>
</div>