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 :
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>