Html 如何对齐两个flexbox元素？

我对flexbox有问题。我试图将两个元素对齐；一个在容器顶部，另一个在容器中心。大多数flexbox示例使用三个元素，而不是两个元素。所以我尝试了自己的解决方案

#主{
显示器：flex；
弹性：1；
弯曲方向：立柱；
证明内容：之间的空间；
高度：100px；
背景色：#dfdfdf；
}
#框1{
显示器：flex；
证明内容：柔性端；
背景色：#ff0000；
}
#框2{
显示器：flex；
背景色：#00ff00；
}
#假人{
显示器：flex；
不透明度：0；
}

框1
框2
笨蛋

您不必添加这个“虚拟”div。根据我的说法，您应该在容器中保留display flex，但将justify content:space between更改为justify content:center

然后简单地将positionabsolute添加到第一个子元素，并将其显示在容器顶部。还要记住将相对位置添加到容器中

以下是工作代码：

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #dfdfdf;
  position: relative;
}

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
  position:absolute;
  top:0;
  width:100%;
}

#box2 {
  display: flex;
  background-color: #00ff00;
}

---

Fiddle:

如果您只想使用flex box，您可以在每个框周围包装另一个.container元素，将它们设置为也使用flex，但将第一个设置为

调整内容：flex start

，最后一个设置为

调整内容：flex end

参见示例

#主{
显示器：flex；
弹性：1；
弯曲方向：立柱；
证明内容：中心；
高度：100px；
背景色：#dfdfdf；
}
.集装箱{
弹性基准：50%；
显示器：flex；
弯曲方向：立柱；
}
.容器：第一个孩子{
调整内容：灵活启动；
}
.容器：最后一个孩子{
证明内容：柔性端；
}
#框1{
背景色：#ff0000；
}
#框2{
背景色：#00ff00；
}

框1
框2