带下拉菜单和按钮的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

这是您要实现的目标吗？

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

Answer 2

我将button-block类添加到了按钮，并添加到了CSS之下。 .button-block {   显示：flex; }

还将flex-wrap: wrap;添加到.container类。

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