在一个容器中设置表单方法和子元素的样式

Question

I am trying to have my form element on the top of the container then my child elements right beneath it (new line) but couldn't make it.

Please, any idea on how to do that?

Update:

I just update my snippet for a better and clearer idea of what I am looking for. So, again, I just need to have the submit form (file import) buttons on top and other child elements buttons right below.

 form { display: flex; top: 0px; margin:0px; width: 1900px; padding: 0px; align-items: center; }.container { display: flex; top: 5px; margin:20px; border-width: 2px; border-bottom-color:#3300ff; border-bottom-style: solid; width: 1900px; border: 5px solid green; border-radius: .5em; padding: 5px; align-items: center; }.child { margin-bottom:50px; }

 <div class="container"> <form action="getfile2" method="POST" enctype="multipart/form-data" > <font size="10"><pre class="tab"> Import File: </pre></font> <input type="file" name="file"> <input type="submit" value="Submit"> </form> <div class="child"> <div id="slider9" class='slider row1 col1'></div> <div class="my_text"><center> <p>param_1</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button9">TURN OFF</button> </center></div> </div> <div class="child"> <div id="slider10" class='slider row6 col2'></div> <div class="my_text"><center> <p>param_2</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button10">TURN OFF</button> </center></div> </div> <div class="child"> <div id="slider11" class='slider row1 col3'></div> <div class="my_text"><center> <p>param_3</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button11">TURN OFF</button> </center></div> </div> </div>

Answer 1

Adding flex-flow: column nowrap; to your .container div will put your .child divs below the <form> element like so:

Note that they are in the middle of your parent, as your parent centers all it's elements with align-items: center;

 form { display: flex; top: 0px; margin: 0px; width: 1900px; padding: 0px; align-items: center; }.container { display: flex; flex-flow: column nowrap; top: 5px; margin: 20px; border-width: 2px; border-bottom-color: #3300ff; border-bottom-style: solid; width: 1900px; border: 5px solid green; border-radius: .5em; padding: 5px; align-items: center; }.child { margin-bottom: 50px; background-color: green; }

 <div class="container"> <form action="getfile2" method="POST" enctype="multipart/form-data"> <font size="10"> <pre class="tab"> Import File: </pre> </font> <input type="file" name="file"> <input type="submit" value="Submit"> </form> <div class="child"> <div id="slider9" class='slider row1 col1'></div> <div class="my_text"> <center> <p>param_1</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button9">TURN OFF</button> </center> </div> </div> <div class="child"> <div id="slider10" class='slider row6 col2'></div> <div class="my_text"> <center> <p>param_2</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button10">TURN OFF</button> </center> </div> </div> <div class="child"> <div id="slider11" class='slider row1 col3'></div> <div class="my_text"> <center> <p>param_3</p> <button class="sliderStateChange">Enable</button> <button id="turn_off_button11">TURN OFF</button> </center> </div> </div> </div>