html - 如何在flex中为每个div均匀分配空间

Question

演示站点在这里。

当它在大屏幕时，apply button空间太大。我想成功flex: space-around

当它开始收缩时，每个 div 都不是均匀对齐的。（再次，flex: space-round会很好）

完整的萨斯：

body {
  font-family: 'Lato', sans-serif;
}

.errors {
  color: red;
  font-size: 70%;
}

.mainContainer {
  background-color: #EAEDF1;
}

.banner {
  position: relative;
  color: white;
}

.banner .topLeft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 1.5vw;
}

.banner .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5vw;
}

.banner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.banner i {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;

  position: absolute;
  bottom: 10%;
  left: 50%;
  cursor: pointer;
}

.banner .arrowDown {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.bodyContainer {
  padding: 20px 10px 10px 10px;
}

.bodySelf {
  background-color: white;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  background-color: #f9fafa;
  padding: 20px;
}

.filter .inputComponent {
  min-width: 150px;
  max-width: 200px;
}

.filter .inputComponent input {
  width: 100%;
  height: 27px;
}

.filter .dorpdownComponent {
  min-width: 110px;
  max-width: 200px;
}

.filter .applyButtonContainer {
  width: 100px;
}

.filter .keywordMain {
  flex-grow: 3;
  padding-right: 20px;
  padding-bottom: 10px;
}

.filter .launchpadMain {
  flex-grow: 4;
  padding-right: 20px;
  padding-bottom: 10px;
}

.filter .minYearMain {
  flex-grow: 2;
  padding-right: 20px;
  padding-bottom: 10px;
}

.filter .maxYearMain {
  flex-grow: 2;
  padding-right: 20px;
}

.filter .applyButtonMain {
  flex-grow: 1;
  padding-right: 20px;
}

.filter select {
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  -webkit-border-radius: 0;
  border-radius: 0;
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 3px;
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
}

.filter select option {
  background-color: white;
  color: white;
}

.filter .applyButton {
  height: 30px;
  width: 100px;
  font-weight: 600;
  color: white;
  background-color: #2dbaba;
}

标签： htmlcsssassflexbox

Answer 1

不是最终答案，可能需要根据 OP 回复进行编辑

.filter > div {
  flex-basis: 0;
  flex-grow: 1;
}

演示（以全页模式运行和检查）：

.filter select {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  -webkit-border-radius: 0;
  border-radius: 0;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 3px;
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
}

.filter select option {
  background-color: white;
  color: white;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  background-color: #f9fafa;
  padding: 20px 10px;
  /* one */
}

.filter > div {
  flex-basis: 0;
  flex-grow: 1;
  padding: 0 10px 10px 10px;
  min-width: 110px;
}

.filter .inputComponent input {
  width: 100%;
  height: 27px;
}

.filter .applyButton {
  height: 30px;
  width: 100%;
  font-weight: 600;
  color: white;
  background-color: #2dbaba;
}

<div class="filter">
  <div class="inputComponent keywordMain">
    <div class="labelText">Keywords</div>
    <input placeholder="eg Falcon">
  </div>
  <div class="dorpdownComponent launchpadMain">
    <div class="labelText">Launch Pad</div>
    <select>
      <option value="">Any</option>
      <option value="kwajalein_atoll">Kwajalein Atoll</option>
      <option value="ccafs_slc_40">Cape Canaveral Air Force Station Space Launch Complex 40</option>
      <option value="stls">SpaceX South Texas Launch Site</option>
    </select>
  </div>
  <div class="dorpdownComponent minYearMain">
    <div class="labelText">Min Year</div>
    <select>
      <option value="">Any</option>
      <option value="2017">2017</option>
    </select>
  </div>
  <div class="dorpdownComponent maxYearMain">
    <div class="labelText">Max Year</div>
    <select>
      <option value="">Any</option>
      <option value="2006">2006</option>
    </select>
  </div>
  <div class="applyButtonContainer applyButtonMain">
    <div>&nbsp;</div>
    <button class="applyButton">Apply</button>
  </div>
</div>