Question

我正在尝试使此表单具有响应性。对于大屏幕上的所有元素，我需要将表格保持在同一宽度的一行上。当我将flex方向更改为column时，元素溢出到顶部。我需要的是表单字段从中等屏幕大小彼此堆叠在一起。链接到密码笔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％defult的填充物。

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

低于768像素（移动屏幕）时，将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;
		}
	}
}

如何使用Flex Box使此表单响应

2 个答案: