为什么 btn 和 h1 仍然在同一行？

Question

我希望播放按钮和 h1 位于不同的行。我该怎么做？

<div class="winner">
  <h1 class="won">You Won!</h1>
  <button class="again">Play Again!</button>
</div>

.winner {
  background-color: #9792e3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
}
.won {
  color: #e85f5c;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
}
.again {
  display: block;
  border-radius: 5px;
}

图片如下：

Answer 1

.winner {
  background-color: #9792e3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
}
.won {
  color: #e85f5c;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
}
.again-div {
  display: block;
  border-radius: 5px;
}

<div class="winner">
<h1 class="won">You Won!</h1>
<button class="again">Play Again!</button>
</div>

添加flex-direction: column;

Answer 2

您使用的 Flex 具有默认方向值作为行，因此它显示在同一行中，您可以删除显示 flex 属性或将其方向更改为列。这是我修改后的代码，我删除了 flex 属性.

代码

            <div class="winner">
            <h1 class="won">You Won!</h1>
            <button class="again">Play Again!</button>
            </div>  

            .winner {
                background-color: #9792e3;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                transform: translateY(-100%);
            }
            .won {
                color: #e85f5c;
                font-family: "Anton", sans-serif;
                font-size: 3rem;
            }
            .again {
                display: block;
                border-radius: 5px;
            }

为什么 btn 和 h1 仍然在同一行？

Why the btn and the h1 still at the same line?

html

css

display