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

您可以将.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>

Answer 2

尝试一下

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>

flex项目后如何添加空白空间？

2 个答案: