Javascript 如何在flex项后添加空白？

假设页面被水平切割成三个相等的部分。考虑到这一点，我想使用

flexbox

将图像放置在第一块中（或

flex

容器的子对象），将

输入

字段放置在第二块中，并将第三块留空

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

我曾尝试使用

flex-basis:space-between

，但它将第二个输入字段移动到屏幕底部，这是显而易见的，因为我只有两个子项

注意：添加一个空div是可行的，但这被认为是最佳实践吗

代码如下：

正文{
保证金：0；
填充：0；
字体系列：“雷威”；
}
.根{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
弹性基准：100%；
}
#输入名称{
边界：无；
字号：1em；
/*边框底部：1px实心rgb（206206206）*/
填充：0.5em；
背景：#f7f7f7；
}
：-webkit输入占位符{
颜色：#D3；
}
文本区域：焦点，输入：焦点{
大纲：无；
}
.输入表格{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.输入表格>p{
自对准：柔性端；
颜色：rgb（143143143）；
}
.root>img{
宽度：2米；
高度：2米；
}

按回车键

您可以使用

.root:after

和

内容：''作为第三个flex子级：


正文{
保证金：0；
填充：0；
字体系列：“雷威”；
}
.根{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
弹性基准：100%；
}
.根：之后{
内容：''；
}
#输入名称{
边界：无；
字号：1em；
/*边框底部：1px实心rgb（206206206）*/
填充：0.5em；
背景：#f7f7f7；
}
：-webkit输入占位符{
颜色：#D3；
}
文本区域：焦点，
输入：焦点{
大纲：无；
}
.输入表格{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.输入表格>p{
自对准：柔性端；
颜色：rgb（143143143）；
}
.root>img{
宽度：2米；
高度：2米；
}

按回车键

试试这个


正文{
保证金：0；
填充：0；
字体系列：“雷威”；
}
.根{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
弹性基准：100%；
}
#输入名称{
边界：无；
字号：1em；
/*边框底部：1px实心rgb（206206206）*/
填充：0.5em；
背景：#f7f7f7；
}
：-webkit输入占位符{
颜色：#D3；
}
文本区域：焦点，输入：焦点{
大纲：无；
}
.输入表格{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.图像填充{
填充：1em 0；
}
.输入表格>p{
自对准：柔性端；
颜色：rgb（143143143）；
}
.root>img{
宽度：2米；
高度：2米；
}

按回车键

将子项的弹性基础设置为33.3%将有助于您为什么不能添加第三个子项？@user2507，因为它只有两个项？@ElijahEllanski我尝试了您的解决方案，但无效。它对你有用吗？你可以放第三个项目。留空，给每个子项33.33%的高度