為什麼我的 Flexbox CSS 無法正常運作？

Question

為什麼 display:flex 在我的 CSS 程式碼中不起作用？我想讓我的 HTML 程式碼的這一部分位於頁面的中心。

body {
  margin: 0;
  display: flex auto 0 1;
  justify-content: center;
  height: 100vh;
}

<form class="form" id="form"></form>
<h4 class="score" id="score">score :0</h4>
<h1 id="Question">What is 1 multiply by 1?</h1>
<input type="text" class="input" id="input" placeholder="Enter your answer" autofocus autocomplete="off">
<button type="submit" class="btn">submit</button>

Answer 1

flex auto 0 1 是 display 的無效屬性值。您的瀏覽器的文檔檢查器將向您顯示這一點。您需要在 display 和 flex 屬性中分隔這些值。

我懷疑您還想要 flex-direction: column，但我會留給您。

body {
  margin: 0;
  display: flex;
  flex: auto 0 1;
  justify-content: center;
  height: 100vh;
}

score :0

What is 1 multiply by 1?

submit