Why isn't my Flexbox CSS working correctly?

Question

Why doesn't display:flex work in my CSS code? I want this part of my HTML code to be in the center of the page.

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 is an invalid property value for display. Your browser's document inspector will show you this. You need to separate these values ​​in the display and flex properties.

I suspect you also want flex-direction: column, but I'll leave that to you.

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

score :0
What is 1 multiply by 1?

submit