html - 始终使用 flexbox 将按钮定位在表单底部

Question

我在这里创建了一个 fiddle :http://jsfiddle.net/gonw4udf/1/

我有一个表格，我们希望它具有最小高度。有时，表单只有很少的字段，这意味着“提交”按钮紧跟在最后一个字段之后。但是，我们希望“提交”按钮始终位于其容器的底部。

我想知道是否有一种方法可以做到这一点而不必依赖 position: absolute。

澄清一下:如果表单高于最小高度，则可以将“提交”按钮紧跟在最后一个字段之后。但是，对于比最小高度短的表单，我们总是希望表单底部有“提交”按钮。这些表单可能有多个有效高度，因此不依赖硬编码像素值的解决方案将是最好的。

.form-wrapper {
  max-width: 300px;
  width: 300px;
  background-color: #D2B4DE;
  padding: 20px 30px;
  min-height: 300px;
}

.form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0 auto;
}

.form-title {
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 8px;
}

.button {
  margin-top: 10px;
  justify-content: flex-end;
  align-items: baseline;
}

<div class="form-wrapper">
  <form class="form">
    <div class="form-title">
      This is a form title.
    </div>
    <label for="field">Field</label>
    <input type="text" id="field" placeholder="Enter a field" />

    <button class="button">Submit</button>
  </form>
</div>

Answer 1

您的表单没有填满它的容器，您可以使用 min-height: 100% 或也将容器设置为 flex box(更简单的方法，不需要考虑边距)。

完成此操作后，该按钮应向下移动到带有自动边距的表单底部。

可能的例子:

.form-wrapper {
  max-width: 300px;
  width: 300px;
  background-color: #D2B4DE;
  padding: 20px 30px;
  min-height: 300px;
  display:flex;/* NEW*/
}

.form {
  display: flex;
  flex-direction: column;
  gap:10px;/*NEW*/
  flex-wrap: wrap;
  margin: 0 auto;
}

.form-title {
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 8px;
}

.button {
  margin-top:auto;/* MODIFIED*/
  align-items: baseline;
}

<div class="form-wrapper">
  <form class="form">
      <div class="form-title">
         This is a form title.
      </div>
      <label for="field">Field</label>
      <input type="text" id="field" placeholder="Enter a field" />

      <button class="button">Submit</button>
  </form>
</div>