Как гридами разместить дивы по углам родителя?

Question

У меня есть 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол flex-контейнера. Решил сделать это через свойство justify-self и когда задаю для div.one параметр justify-self: start;, то реакции нет.

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-size: 30px;
  color: #fff;
  outline: 1px solid red;
  height: 800px;
}

.one {
  width: 200px;
  height: 200px;
  background-color: red;
  align-self: flex-start;
  justify-self: start;
}

.two {
  width: 200px;
  height: 200px;
  background-color: blue;
  align-self: flex-end;
}

.three {
  width: 200px;
  height: 200px;
  background-color: black;
  align-self: flex-start;
}

.four {
  width: 200px;
  height: 200px;
  background-color: green;
  align-self: flex-end;
}

<div class="flex">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

Можно ли разместить все <div>-ы по углам с помощью grid?

(Код на Codepen)

Answer 1

Для начала, вы путаете в тексте понятия Flexbox и Grid Layout. Но так как у вас в примере flexbox, то буду давать ответ именно с использованием его.

.flex {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  color: #fff;
  outline: 1px solid red;
  height: 500px;
  align-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex::before {
  width: 100%;
  content: "";
  order: 2;
}

.flex>div {
  width: 100px;
  height: 100px;
}

.one {
  background: red;
  order: 1;
}

.two {
  background: blue;
  order: 1;
}

.three {
  background: black;
  order: 2;
}

.four {
  background: green;
  order: 2;
}

<div class="flex">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

В данном решении есть только пара недостатков. Первый: для создания переноса используется псевдо-элемент, а это отчасти хак, хоть и не критичный. Второй: необходимости использовать flexbox для этой задачи особой нет. Думаю, проще было бы реализовать такое поведение на grid или через абсолютное позиционирование относительно родительского блока. Естественно, каждое решение со своими нюансами, все зависит от конечных требований.

БЛОГ НА HUSL

Как гридами разместить дивы по углам родителя?

Ответы (1 шт):