css - CCS Flexbox 挑战 - 内容未按要求在框中排列

Question

我有一个要求，其中外部 flexbox 中的四个元素需要按如下方式排列:

当屏幕尺寸缩小到 400px 时，

@media screen and (max-width: 400px) {}

它需要更改，品牌名称需要放在最上面，其他元素在下面对齐，如下所示:

然而，这不是目前代码的工作方式。在桌面的情况下，品牌名称与 flexbox 的顶部对齐，并且选择框标签没有像我需要的那样垂直左对齐它们各自的选择框。

在移动 View 中，内容从外部 flexbox 中涌出(下图 2):

在下面找到相同的完整代码:

jQuery(document).ready(function($) {
  jQuery('#SortBy').select2({
    width: 'auto'
  });
  jQuery('#columnCheckboxes').select2({
    width: 'auto'
  });
  jQuery('#rowCheckboxes').select2({
    width: 'auto'
  });
});

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.HeadingBar {
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  background: #2a8aeb;
}

.Brand {
  display: flex;
  flex-direction: column;
  flex: 1 1 30%;
  width: 30%;
  justify-content: center;
  align-self: center;
  height: 100%;
  color: white;
  font-size: 2rem;
  padding-right: 2%;
  padding-left: 1%;
  margin: auto;
}

.Selectors {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 70%;
}

.SelectorsSort {
  display: flex;
  flex: 1 1 15%;
  padding: 1%
}

.SelectorsFilter {
  display: flex;
  flex: 1 1 80%;
  padding: 1%
}

.SelectorFilterPhone {
  display: flex;
  flex: 1 1 50%;
  padding: 1%
}

.SelectorFilterParameter {
  display: flex;
  flex: 1 1 50%;
  padding: 1%
}

@media screen and (max-width: 400px) {
  body {
    font-size: 80%;
  }
  .Brand {
    display: flex;
    flex-direction: row;
    flex: 1 1 100%;
    align-self: left;
    height: 40%;
    color: white;
    font-size: 1rem;
    padding-right: 2%;
    padding-left: 1%;
    margin: auto;
  }
  .Selectors {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
    width: 100%;
  }
  .SelectorsSort {
    display: flex;
    flex: 1 1 15%;
    padding: 1%
  }
  .SelectorsFilter {
    display: flex;
    flex: 1 1 80%;
    padding: 1%
  }
  .SelectorFilterPhone {
    display: flex;
    flex: 1 1 50%;
    padding: 1%
  }
  .SelectorFilterParameter {
    display: flex;
    flex: 1 1 50%;
    padding: 1%
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="HeadingBar">
  <div class="Brand">
    Brand
  </div>
  <div class="Selectors">
    <div class="SelectorsSort">
      <div style="color:white; font-size: 120%">Sort:</div>
      <select id="SortBy">
        <option>--Sort By--</option>
        <option>Parameter1</option>
        <option>Parameter2</option>
        <option>Parameter3</option>
        <option>Parameter4</option>
      </select>
    </div>
    <div class="SelectorsFilter">
      <div class="SelectorFilterPhone">
        <div style="color:white; font-size: 120%">Filter Phone:</div>
        <select id="columnCheckboxes">
          <option>--Filter Phone--</option>
          <option>Samsung</option>
          <option>Apple</option>
          <option>Xiomi</option>
        </select>
      </div>
      <div class="SelectorFilterParameter">
        <div style="color:white; font-size: 120%">Filter Parameters:</div>
        <select id="rowCheckboxes">
          <option>--Filter Parameter--</option>
          <option>Parameter1</option>
          <option>Parameter2</option>
          <option>Parameter3</option>
          <option>Parameter4</option>
        </select>
      </div>
    </div>
  </div>
</div>

请帮助我解决 Flexbox 的 CCS 哪里出了问题，因为我是新手并且一直在努力解决它。 :(

Answer 1

编辑:希望这段代码有所帮助。

我建议您将媒体查询 max-width 更改为 450px 而不是 400。此外，您可能希望将下拉菜单包装在一个低于 450 像素的列。

如果您需要任何说明，请告诉我。

* {
  box-sizing: border-box;
}

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.HeadingBar {
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  background: #2a8aeb;
}

.Brand {
  display: flex;
  flex-direction: column;
  flex: 1 1 30%;
  width: 30%;
  justify-content: center;
  align-self: center;
  height: 100%;
  color: white;
  font-size: 2rem;
  padding-right: 2%;
  padding-left: 1%;
  margin: auto;
}

.Selectors {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 70%;
}

.SelectorsSort {
  flex: 1 1 auto;
  padding: 1%
}

.SelectorsFilter {
  display: flex;
  flex: 1 1 80%;
  padding: 1%;
  justify-content: space-evenly
}

.SelectorFilterPhone {
  flex: 1 1 auto;
  padding: 1%
}

.SelectorFilterParameter {
  flex: 1 1 auto;
  padding: 1%
}

@media screen and (max-width: 400px) {
  body {
    font-size: 80%;
  }
  .Brand {
    display: flex;
    flex-direction: row;
    flex: 1 1 100%;
    align-self: left;
    height: 40%;
    color: white;
    font-size: 1rem;
    padding-right: 2%;
    padding-left: 1%;
    margin: auto;
  }
  .Selectors {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
    width: 100%;
  }
  .SelectorsSort {
    flex: 1 1 15%;
    padding: 1%
  }
  
  .SelectorFilterPhone {
    flex: 1 1 auto;
    padding: 1%
  }
  .SelectorFilterParameter {
    flex: 1 1 auto;
    padding: 1%
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="HeadingBar">
  <div class="Brand">
    Brand
  </div>
  <div class="Selectors">
    <div class="SelectorsSort">
      <div style="color:white; font-size: 120%">Sort:</div>
      <select id="SortBy">
        <option>--Sort By--</option>
        <option>Parameter1</option>
        <option>Parameter2</option>
        <option>Parameter3</option>
        <option>Parameter4</option>
      </select>
    </div>
    <div class="SelectorFilterPhone">
      <div style="color:white; font-size: 120%">Filter Phone:</div>
      <select id="columnCheckboxes">
        <option>--Filter Phone--</option>
        <option>Samsung</option>
        <option>Apple</option>
        <option>Xiomi</option>
      </select>
    </div>
    <div class="SelectorFilterParameter">
      <div style="color:white; font-size: 120%">Filter Parameters:</div>
      <select id="rowCheckboxes">
        <option>--Filter Parameter--</option>
        <option>Parameter1</option>
        <option>Parameter2</option>
        <option>Parameter3</option>
        <option>Parameter4</option>
      </select>
    </div>
  </div>
</div>