I'm trying to put one link to each corner (left, top, right, bottom) using Flexbox

I tried `top: 0` or setting `flex-direction` to `column`

```css
.container {
  position: relative;
}

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

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

```html
<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>
```

I expect to get one link to each corner like this screenshot: 

[![enter image description here](https://i.stack.imgur.com/Bl7sz.png)](https://i.stack.imgur.com/Bl7sz.png)

but I got this instead

[![enter image description here](https://i.stack.imgur.com/M96eD.png)](https://i.stack.imgur.com/M96eD.png)