Question

我正在使用flexbox将表格垂直和水平居中。在这个表单中，我想在flexbox容器的右下方按一个按钮。我不知道怎么把按钮固定在右下方。

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;
}

.form-button {
  margin-top: 1em;
  align-self: flex-end;
}

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

Answer 1

您只需要将form元素设置为flex容器，因为flex属性仅在父元素和子元素之间起作用。

换句话说，align-self: flex-end上的.form-button无效，因为家长 - form - 没有应用display: flex或display: inline-flex。< / p>

以下是一个更完整的解释：

Proper use of flex properties when nesting flex containers

＆＃13;

html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;

  /* NEW */
  display: flex;
  flex-direction: column;
}

.form-button {
  margin-top: 1em;
  align-self: flex-end;
}

＆＃13;

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
   </div>
  </form>
</div>

＆＃13;

Answer 2

.form-button {
  margin-top: 1em;
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}

Answer 3

只需插入float: right;

即可像这样

：

.form-button {
  float: right;<-----------added
  //more code...
}

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

form {
  border: 1px solid gray;
  padding: 1em;
}

.form-button {
  margin-top: 1em;
  float: right;
}

<div class="container">
  <form>
    <div class="form-input">
      <label> Name <input type="text" /></label>
    </div>
    <div class="form-button">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

将按钮固定到容器的底角

3 个答案: