如何使用弹性框使此表单具有响应性

Question

我正在尝试使此表单具有响应性。 对于大屏幕上的所有元素，我需要表单保持在具有相同宽度的单行上。 当我将 flex 方向更改为列时，元素会溢出到顶部。 我需要的是表单字段从中等屏幕尺寸堆叠在一起。 链接 fo codepen https://codepen.io/Nickbing/pen/RwwrOBp

<div class="container job-search-container">
    <div class="job-search-bar-section">
      <form class="search-form">
        <div class="search-form-group">
          <input
            id="keywords"
            type="text"
            class="search-form-input"
            placeholder="Enter Keywords"
            required
          />
        </div>
        <div class="search-form-group select-item-wrapper">
          <select class="search-form-select">
             <option value="" selected disabled hidden>Categories</option>
            <option value="volvo">IT</option>
            <option value="saab">Civil</option>
          </select>
        </div>
        <div class="search-form-group select-item-wrapper">
          <select class="search-form-select">
            <option value="" selected disabled hidden>Locations</option>
            <option value="volvo">New York</option>
            <option value="saab">California</option>
          </select>
        </div>
        <div class="search-form-group">
          <button type="submit">
            Search Jobs
          </button>
        </div>
      </form>
      <div class="all-jobs">
        <a href="#">all jobs</a>
      </div>
    </div>
  </div>

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}

body {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
}

.job-search-container {
  height: 20rem;
  background-color: lightcoral;

  .job-search-bar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 120rem;
    width: 100%;
    padding: 1rem;

    .search-form {
      width: 100%;
      display: flex;
      //flex-direction: column;
      justify-content: space-between;
      flex-wrap: wrap;
      &-group {
        flex: 1;
        margin-right: 2rem;
        margin-bottom: 1rem;
        //width: 100%;
         input {
          font-family: inherit;
          font-size: 2rem;
          font-weight: 400;
          padding: 2rem;
          // width: 100%;
          height: 5rem;
        }

        select {
          width: 100%;
          height: 5rem;
          font-size: 2rem;
          font-weight: 600;
          padding-left: 1rem;

        }

         button {
          display: inline-block;
          width: 100%;
          height: 5rem;
          font-size: 2rem;
          font-weight: 500;
          text-transform: uppercase;
          background-color: black;
          color: white;
          border: 0;


        }
      }
    }

    .all-jobs {
      margin-right: auto;
      font-size: 2rem;
    }
  }
}

 // @media screen and (max-width: 768px) {
 //        .search-form {
 //    flex-direction: column;
 //    justify-content: center;
 //    align-items: center;
 //  }
 //    }

编辑：好的，如果我将 .job-search-container 的高度更改为固定高度，它就可以工作。 我需要这样一种方式，它可以与 max-height/ 占用所需空间之类的东西一起使用。

Answer 1

逐步应用这些更改。

1.删除页面容器高度并根据需要在顶部和底部设置填充。

.job-search-container {
  height: auto;// or remove
  background-color: lightcoral;
  padding: 60px 0;
}

2.为输入字段添加一些100％默认的完整内容。

.job-search-container .job-search-bar-section .search-form-group input{
    width:100%;
 }

可选：为了更好的用户体验，在移动级别删除 search-form-group 的边距

@media screen(max-width:768px){
   .job-search-container .job-search-bar-section .search-form-group input{
    margin-right:0;
 }    
}

3. 在低于 768px（移动屏幕）中，将 search-form-group 宽度更改为 100%，并使用移动屏幕的媒体查询删除 flex 属性，如下所示，

    @media screen (max-width:768px){.job-search-container.job-search-bar-section.search-form-group{ flex:inherit; width:100%; } }

   如果您对上述代码有任何疑问，我会在这里为您提供帮助，谢谢

Answer 2

您可以使用此代码

 * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0PX; }.container { display: flex; justify-content: center; }.job-search-container { background-color: lightcoral; .job-search-bar-section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 4rem; .search-form { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }.search-form-group { margin-right: 2rem; margin-bottom: 1rem; flex-grow: 1; input { font-family: inherit; font-size: 2rem; font-weight: 400; padding: 2rem; height: 5rem; width: 100%; } select { width: 100%; height: 5rem; font-size: 2rem; font-weight: 500; padding-left: 1rem; } button { display: inline-block; width: 100%; height: 5rem; font-size: 2rem; font-weight: 500; text-transform: uppercase; background-color: black; color: white; border: 0; } }.all-jobs { margin-right: auto; font-size: 2rem; } } }