html - 如何对齐两个 flexbox 元素？

Question

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

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

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
}

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

#dummy {
  display: flex;
  opacity: 0;
}

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div id="dummy">dummy</div>
</div>

...我也将它应用于水平案例。

#main {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  height: 100px;
  background-color: #dfdfdf;
}

#box1 {
  display: flex;
  justify-content: flex-end;
  background-color: #ff0000;
  width: 200px;
}

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

#dummy {
  display: flex;
  opacity: 0;
  width: 200px;
}

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div id="dummy">dummy</div>
</div>

但是，它需要一个无用的虚拟元素。我认为这不是一个好主意:(

有没有更好的方法来解决这个问题？

标签： htmlcsslayoutflexbox

Answer 1

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

然后只需先将绝对位置添加给您，子元素并将其显示在容器顶部。还要记住为您的容器添加相对位置。

这是工作代码：

#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;
}

小提琴：https ://jsfiddle.net/95Lwcbuk/1/