javascript - 如何在 flex 元素后添加空白区域？

Question

假设页面被水平切割成三个相等的部分。考虑到这一点，我想使用 flexbox 将图像放在第一 block (或 flex 容器的子元素)中，放置一个 input 字段，第三部分留空。

我无法将输入字段定位在页面的中心，同时使图像位于顶部。

我尝试过使用 flex-basis:space-between 但它会将第二个输入字段移到屏幕底部，这很明显，因为我只有两个子元素。

注意:添加一个空的 div 是可行的，但这是最佳实践吗？

代码如下:

body {
    margin: 0;
    padding: 0;
    font-family: "Raleway";
}

.root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}

#enter-name {
    border: none;
    font-size: 1em;
    /* border-bottom: 1px solid rgb(206, 206, 206); */
    padding: 0.5em;
    background: #f7f7f7;
}

::-webkit-input-placeholder {
    color: #d3d3d3;
}

textarea:focus, input:focus {
    outline: none;
}

.input-form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.input-form > p{
    align-self: flex-end;
    color:rgb(143, 143, 143);
}

.root > img{
    width:2em;
    height:2em;
}

<div class="root">
    <img src="https://cdn.freebiesupply.com/logos/large/2x/open-source-logo-png-transparent.png" alt="">
    <div class="input-form">
        <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
        <p>Press Enter</p>
    </div>
</div>

Answer 1

您可以将 .root:after 与 content: ''; 一起用作第三个 flex-child:

body {
  margin: 0;
  padding: 0;
  font-family: "Raleway";
}

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex-basis: 100%;
}
.root:after {
  content: '';
}
#enter-name {
  border: none;
  font-size: 1em;
  /* border-bottom: 1px solid rgb(206, 206, 206); */
  padding: 0.5em;
  background: #f7f7f7;
}

::-webkit-input-placeholder {
  color: #d3d3d3;
}

textarea:focus,
input:focus {
  outline: none;
}

.input-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.input-form>p {
  align-self: flex-end;
  color: rgb(143, 143, 143);
}

.root>img {
  width: 2em;
  height: 2em;
}

<div class="root">
  <img src="https://cdn.freebiesupply.com/logos/large/2x/open-source-logo-png-transparent.png" alt="">
  <div class="input-form">
    <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
    <p>Press Enter</p>
  </div>
</div>