Error404 Error404 - 6 months ago 40
HTML Question

How to create a custom form with flexbox?

I am trying to create a

form
using
flexbox
that will have two lines.

In the first one, all the
inputs
and content will be displayed. In the second one, I want to display the submit
button
.

+----------------+--------------------------+
| CONTENT | INPUTS |
+----------------+--------------------------+
| SUBMIT BUTTON |
+-------------------------------------------+


Here is my code:



html, body{
width: 100%;
margin: 0;
}

#content{
display: flex;
}
#divInside{
position: relative;
width: 200px;
height: 155px;
text-align: center;
background-color: red;
color: white;
margin: 10px;
}

#customForm{
display: flex;
justify-content: center;
align-items: center;
}

#wrapperName{
flex: 1;
}

<div id="content">
<form id="customForm" action="whatever" method="post">
<div id="divInside"></div>
<div id="wrapperName">
<input class="textForm" type="text" name="name" placeholder="Name"><br>
<input class="textForm" type="text" name="description" placeholder="Description"><br>
</div>
<input id="buttonLogin" type="submit" value="Submit">
</form>
</div>





I tried wrapping the content in one div and the
inputs
in another to fill the full line but, as the first div (
#divInside
) has a fixed
width
, I do not know how to make the other div (
#wrapperName
) fill the rest of the line and force the
button
to move to the next line.

How can I force the
button
to the next line?

Thanks in advance!

Answer

The layout is relatively simple with flex properties alone. No need for CSS positioning properties.

#customForm {
    display: flex;              /* primary flex container */
    flex-wrap: wrap;            /* enable flex items to wrap */
}
#divInside {
    width: 200px;
    height: 155px;
    background-color: red;
    color: white;
    margin-right: 10px;
    display: flex;               /* nested flex container (for text alignment demo) */
    justify-content: center;     /* center text (optional) */
    align-items: center;         /* center text (optional) */
}
#wrapperName {
    flex: 1;                     /* consume all available space in the line */
    display: flex;             
    flex-direction: column;      /* stack flex items vertically */
    justify-content: center;     /* vertical alignment */
}
#buttonLogin {
    flex-basis: 100%;            /* force button to its own line; take full width */
}
<form id="customForm" action="whatever" method="post">
  <div id="divInside">Content</div>
  <div id="wrapperName">
    <input class="textForm" type="text" name="name" placeholder="Name">
    <input class="textForm" type="text" name="description" placeholder="Description">
  </div>
  <input id="buttonLogin" type="submit" value="Submit">
</form>

Comments