Menu
How do you distribute child elements vertically evenly? For example, if I have a div with 3 input fields, each set to 100% width, I wish them to be distributed evenly in three rows, i.e 33.33% high as in the picture. Also, if there are 2 fields, I wish them to be in two rows each 50% high without explicitly setting them as such. Any ideas?
Currently my code bunches all the input fields at the top as in the snippet below.
input { width: 60%;}
.whole-container { height: 300px;background: yellow;}<body>
<div class="whole-container">
<form id="login-form" method="POST">
<input name="name" type="text" placeholder="Your name" id="cf-nameInput">
<input name="email" type="email" placeholder="your@email" id="cf-emailInput">
<input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput">
</form>
</div>
</body>
678
You can use flex:
input {
width: 60%;
}
.whole-container {
height: 300px;
background: yellow;
}
.whole-container form {
height:100%;
display:flex;
flex-direction:column;
justify-content:space-around;
}<body>
<div class="whole-container">
<form id="login-form" method="POST">
<div><input name="name" type="text" placeholder="Your name" id="cf-nameInput"></div>
<div><input name="email" type="email" placeholder="your@email" id="cf-emailInput"></div>
<div><input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"></div>
</form>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
