我如何包装按钮？

Question

Here is how my code currently renders, but I want it to look like this

* {
  box-sizing: border-box;
}
body {
  background: rgb(75, 109, 221);
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div {
  display: flex;
  justify-content: center;
  position: relative;
  top: 100px;
}   
button {
  height: 100px;
  width: 150px;
  background-color: white;
  font-size: large;
}

<div className="Home">
  <button class="donate-blood-button">Donate Blood</button>
  <button class="request-blood-button">Request Blood</button>
</div>

Answer 1

您可以使用 flex-direction: column 来做到这一点，这基本上翻转了 justify-content 和 align-items 的用法。然后，设置 align-items: center 和 justify-content: space-between 并设置容器的高度（我使用 300px）。

* {
  box-sizing: border-box;
}

body {
  background: rgb(75, 109, 221);
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 100px;
  height: 300px;
}

button {
  height: 100px;
  width: 150px;
  background-color: white;
  font-size: large;
}

<div className="Home">
  <button class="donate-blood-button">Donate Blood</button>
  <button class="request-blood-button">Request Blood</button>
</div>

任何时候您在 display: flex; 方面需要帮助时，都应该在 the Yoga Layout Playground 上测试您的想法。这是一个非常强大的元素定位工具。

Answer 2

.Home
{
   display: inline;
}

.Home
{
   display: inline;
}

<div class="Home">
   <button class="donate-blood-button">Donate Blood</button>
   <button class="request-blood-button">Request Blood</button>
</div>

Answer 3

* {
  box-sizing: border-box;
}

body {
  background: rgb(75, 109, 221);
  color: black;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.Home {
  margin:13% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.Home > button {
  height: 100px;
  width: 150px;
  background-color: white;
  font-size: large;
  margin:50px 0;
}

<div class="Home">
  <button class="donate-blood-button">Donate Blood</button>
  <button class="request-blood-button">Request Blood</button>
</div>

我如何包装按钮？

How do i wrap the buttons?

html

css

layout