Why isn't this flexbox with inputs working?-CodePudding

It's HTML inside PHP. The input boxes are just under each other. I want to position them to be in an horizontal flexbox inside a rectangle, side by side to fill the rectangle.

#retang1{
  display: flex;
  position: absolute;
  width: 1118px;
  height: 95px;
  left: 117px;
  top: 290px;

  background: linear-gradient(90deg, #5FC5B7 0%, #3A857B 100%);
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
  border-radius: 17px;
} 
    
#retang1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div id="retang1">
  <form action="enviarinfos.php" method="POST">
    <div>
      <input type="text" name="materia" value="Matéria">
      <br>
    </div>
    <div>
      <input type="text" name="trab" value="Trabalho">
      <br>
    </div>
    <div>
      <input type="text" name="prova" value="Prova">
      <br>
    </div>
    <div>
      <button type="submit" name="submit">Enviar</button>
    </div>
  </form>
</div>

CodePudding user response：

Add this to your style:

form {
    display: flex;
}

And style accordingly. You can read this link too. https://www.w3schools.com/css/css3_flexbox.asp

CodePudding user response：

display:flex does not work for all the children elements, it sets a flex container for direct children only. That's why you have to put it inside the form element.

CodePudding user response：

As @Nayereh and @jakub said, you should set flex to the form element. and it works. So their answers are correct:

#retang1{
  position: absolute;
  width: 1118px;
  height: 95px;
  left: 117px;
  top: 290px;
  background: linear-gradient(90deg, #5FC5B7 0%, #3A857B 100%);
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
  border-radius: 17px;
} 
form{
  display: flex;
}
#retang1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div id="retang1">
  <form action="enviarinfos.php" method="POST">
    <div>
      <input type="text" name="materia" value="Matéria">
      <br>
    </div>
    <div>
      <input type="text" name="trab" value="Trabalho">
      <br>
    </div>
    <div>
      <input type="text" name="prova" value="Prova">
      <br>
    </div>
    <div>
      <button type="submit" name="submit">Enviar</button>
    </div>
  </form>
</div>