如何垂直均匀分布子元素?例如,如果我有一个包含3个输入字段的div,每个字段设置为100%宽度,我希望它们在三行中均匀分布,即高度为33.33%,如图片所示。此外,如果有2个字段,我希望它们分别在两行中均匀分布,每行高度为50%,而无需明确设置。有任何想法吗?
目前,我的代码将所有输入字段堆叠在顶部,如下面的片段所示。
![enter image description here](https://istack.dev59.com/Wy7aY.webp)
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>