Как получить каждый элемент в одном углу с помощью Flexbox CSS?

Question

Я пытаюсь поместить одну ссылку в каждый угол (слева, сверху, справа, снизу), используя Flexbox

Я пытался 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>

Я ожидаю получить одну ссылку на каждый угол, как показано на этом скриншоте:

но я получил это вместо

Answer 1

Чистое и простое решение flexbox (без взлома или абсолютного позиционирования):

.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>

Answer 2

Вам не нужно использовать .top & .bottom для flexbox.Flexbox может обрабатывать меньше HTML-кода.

<style>
.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
}

.container a {
    flex: 1 1 50%;
}

.container a:nth-child(2n) {
    text-align: right;
}

.container a:nth-child(3),
.container a:nth-child(4) {
    align-self: flex-end;
}

<div class="container">
    <a href="#">ONE</a>
    <a href="#">TWO</a>
    <a href="#">THREE</a>
    <a href="#">FOUR</a>
</div>

Answer 3

это из-за высоты в ваших bottom и top div, он будет занимать только минимальную высоту содержимого по умолчанию и то же самое для контейнера-оболочкиэто один из способов, как вы можете это исправить, используя только flexbox:

.container {
   height: 95vh;
   display: flex;
   flex-direction : column;
   justify-content: space-between;
}

.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>

Answer 4

Для чего-то подобного, position: absolute; может быть лучше.

.container { position: relative; }

.top-left { position: absolute; top: 0; left: 0 }

.top-right { position: absolute; top: 0; right: 0 }

.bottom-left { position: absolute; bottom: 0; left: 0 }

.bottom-right { position: absolute; bottom: 0; right: 0 }