使用display flex和按钮下方的显示块按钮

Question

我需要将按钮置于按钮下方，并显示弹性。 当我移开display: flex时，按钮会在页面上移，但是当我使用display: flex时，按钮会居中，但并排。

#wrapper {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  height: 20px;
  width: 100px;
}

<div id="wrapper">
  <button type="button">hello</button>
  <button type="button">hello</button>
</div>

Answer 1

您可以使用flex-direction: column。这将垂直堆叠弹性项目（从上到下）

#wrapper {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

button {
  height: 20px;
  width: 100px;
}

<div id="wrapper">
  <button type="button">hello</button>
  <button type="button">hello</button>
</div>