Question

我在Flex容器中居中两个元素时遇到了大麻烦。我想做的是将一个元素放在flex容器的顶部（使用flex-start？）和一个元素放在容器的底部（flex-end？）。我尝试了几种选择，但无法得到我想要的东西。我的大多数尝试以容器左上半部分中的一个元素结束，而右下角中的另一个元素结束......

请查看：jsfiddle

<!DOCTYPE html>
<body>
  <div class="flexcontainer1">
    <div class="txt1"> Some text here </div>
  </div>
  <div class="flexcontainer2">
    <div class="row">
      <div class="txt2"> Some more text </div>
      <div class="txt2"> Even more text </div>
    </div>
  </div>
</body>

这一切都可能吗？

此外：我告诉元素要居中，但看起来第二行（更多文字）根本不居中。或者这只是光学？

谢谢，汉斯

Answer 1

Flex容器和flex项之间的.row容器很烦人，所以摆脱它。

然后，

.flexcontainer1, .flexcontainer2 {
  display: flex;          /* Magic begins        */
  flex-direction: column; /* Vertical layout     */
  align-items: center;    /* Center horizontally */
}
.flexcontainer1 { justify-content: space-around;  }
.flexcontainer2 { justify-content: space-between; }

.flexcontainer1, .flexcontainer2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
}
.flexcontainer1 {
  justify-content: space-around;
  height: 250px;
}
.flexcontainer2 {
  justify-content: space-between;
  height: 150px;
}
.txt1 {
  font-size: 3.0vw;
}
.txt2 {
  font-size: 2.2vw;
}

<div class="flexcontainer1">
  <div class="txt1">Some text here</div>
</div>
<div class="flexcontainer2">
  <div class="txt2">Some more text</div>
  <div class="txt2">Even more text</div>
</div>

似乎无法将中心元素放在flex中（顶部和底部）

1 个答案: