html - 如何使用 Flexbox CSS 将每个元素放在一个 Angular 落？

Question

我正在尝试使用 Flexbox 将一个链接放置到每个 Angular (左、上、右、下)

我试过 top: 0 或将 flex-direction 设置为 column

.container {
  position: relative;
}

.top {
  display: flex;
  justify-content: space-between;
}

.bottom {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

<div class="container">
  <div class="top">
    <a href="one/">ONE</a>
    <a href="two/">TWO</a>
  </div>
  <div class="bottom">
    <a href="three/">THREE</a>
    <a href="four/">FOUR</a>
  </div>
</div>

我希望像这张截图一样得到一个指向每个 Angular 落的链接:

但我得到了这个

Answer 1

干净简单的 flexbox 解决方案(没有 hack 或绝对定位):

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* horizontal spacing */
  align-content: space-between;   /* vertical spacing */
}

.top, .bottom {
  flex-basis: 100%;    /* to force .bottom to wrap */
  display: flex;
  justify-content: space-between;
}

a {
  background-color: orange;
}

body {
  margin: 0;
  background-color: lightgray;
}

<div class="container">
  <div class="top">
    <a href="one/">ONE</a>
    <a href="two/">TWO</a>
  </div>
  <div class="bottom">
    <a href="three/">THREE</a>
    <a href="four/">FOUR</a>
  </div>
</div>