Как добавить пустое место после flex-элемента?

Question

Скажем, страница разрезана горизонтально на три равных части . Имея это в виду, я хочу использовать flexbox, чтобы поместить изображение в первый фрагмент (или дочерний элемент контейнера 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

Попробуйте это

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;
}
.image-padding{
  padding: 1em 0;
}
.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="" class="image-padding">
    <div class="input-form">
        <input id="enter-name" placeholder="Search for tomriddle" type="text" autofocus>
        <p>Press Enter</p>
    </div>
</div>

Answer 2

Вы можете использовать .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>