带有下拉菜单和按钮的 Flexbox 布局

Question

我正在尝试使用 FlexBox 做一个简单的布局。我搜索了类似的问题，但我找不到什么可以帮助我。如果有类似的情况，我很抱歉。

我的目标是：

label A、dropdown menu 和 label B（不是 buttons）应该在屏幕调整大小时调整大小，但 label A 和 label B 文本应该始终在一行上。 在移动设备上，我希望 label B 和 buttons 在新行中。

布局必须是响应式的：当屏幕宽度变小时，下拉 div 应该更小。如果所有元素都大于屏幕大小，那么label B 和四个按钮应该在新的一行。

我尝试使用 Flexbox。

这是我的简单代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center; 
  border: 1px solid black;
}

.button {
  border: 1px solid black;
  background: gray;
}

<div class="container">
  <div>Label A</div>
  
  <div>Dropdown menu</div> 
  
  <div>Label B</div>
  
  <div>
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>

如您所见，存在一些问题。

我尝试wrap，但我希望buttons 永远在一起。

我是一个初学者，所以我需要帮助。我阅读了this beautiful article 关于 flex 的内容，但我仍然有问题。

Answer 1

我将button-block 类添加到按钮并添加到css 下方。 .按钮块{ 显示：弯曲； }

还在 .container 类中添加了 flex-wrap: wrap;。

.container {
  display: flex;
  justify-content: space-between;
  text-align: center;
  border: 1px solid black;
  flex-wrap: wrap;
}

.button {
  border: 1px solid black;
  background: gray;
}

.button-block {
  display: flex;
}

<div class="container">
  <div>Label A</div>
  
  <div>Dropdown menu</div> 
  
  <div>Label B</div>
  
  <div class="button-block ">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>

Answer 2

这是你想要达到的目标吗？

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center; 
  border: 1px solid black;
}

.button {
  border: 1px solid black;
  background: gray;
}
#button-row {
  display: flex;
  flex-direction: row;
}

和

<div class="container">
  <div>Label A</div>

  <div>Dropdown menu</div> 

  <div>Label B</div>

  <div id="button-row">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>

这是一个 jsfiddle：https://jsfiddle.net/sek0q4vL/