Why do I have to display:block items so they align below each other in a flexbox?
The CSS code below was supposed to make every item of the form to be in a single column, like, one below the other, but it doesn't work unless I add the code:
input {
display:block;
}
Why does this happen and how could I achieve that using only the #flex rule block?
* {
box-sizing: border-box;
margin: 0;
padding:0
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
justify-items: center;
height: 90vh;
}<div id='flex'>
<form id='something'>
<input type='email' />
<input type='password' />
<button>Entrar</button>
</form>
</div>Solution 1:
Your #flex element has only one child: #something, so the flex settings hardly have an effect, they definitely don't affect the grandchildren input and button, but only the direct child (#something). Apply your settings to #something - this will have the effect you are asking for since it affects the direct children of #something:
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
#something {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
justify-items: center;
height: 90vh;
}<div id='flex'>
<form id='something'>
<input type='email' />
<input type='password' />
<button>Entrar</button>
</form>
</div>Solution 2:
Alternatively to Johannes's answer, you can make the inputs and button flex-items of the #flex div by making the #something form display:contents
* {
box-sizing: border-box;
margin: 0;
padding:0
}
#something {
display:contents;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
justify-items: center;
height: 90vh;
}<div id='flex'>
<form id='something'>
<input type='email' />
<input type='password' />
<button>Entrar</button>
</form>
</div>