如何在弹性项目后添加空白空间？答案

【问题标题】：How to add empty space after flex item?如何在弹性项目后添加空白空间？
【发布时间】：2018-12-08 13:02:07
【问题描述】：

假设页面被水平切割成三个相等的部分。考虑到这一点，我想使用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>

【问题讨论】：

将子项的 flex-basis 设置为 33.3% 会有所帮助
为什么不能添加第三个孩子？
@user2507 因为它只有两个项目？
@ElijahEllanski 我尝试了您的解决方案，但它不起作用。它对你有用吗？
你可以放第三个项目。将其留空，使每个子项的高度为 33.33%

标签： javascript html css flexbox

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：