How do I use flex?

Coding Help
1

I’m trying to make a game with my Friends and it requires flex, I’ve stumbled across manny documentations but none seam to work (Or im just bad at it)

So this is the code:

<div class="container">
<form id="setupCard flex-2" class="just-center menuCard">
  <div class="w3-section">
  <input class="grayness w3-round w3-center w3-input" type="text" id="username" name="username" maxlength="10" placeholder="Enter Username"><br>
  <button type="submit" class="flex-item w3-center w3-button enter-menu w3-green w3-large hover-dark-green enter" onclick="gameCanvas()" id="enterGame">Enter Game</button>
    <button class="flex-item">
    <i class="fa fa-question"></i>
  </button>
  <!-- Canvas -->
  <!-- <canvas id="gameCanvas"></canvas> -->
  </div>
</form>
</div>

and this is the CSS

.container {
  display: flex;
  width: 800px;
  margin: 0 auto;
  justify-content: flex-start;
  padding: 0;
  list-style: none;
  flex-flow: row wrap;
}

I whant the question mark to be right beside the Enter Game button
image

2

that display: flex controls how the div.container lays out its direct children. it only has one such child, which is the form, so nothing too interesting happens with the layout.

3

How do i fix it?

20char