Почему не получается переместить объект с помощью justify-self?

Question

[Norum]

у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет...почему?
https://codepen.io/tempest2708/pen/ZEWaepy

Answer 1

[WapSter]

MDN: In flexbox layouts, this property is ignored

Answer 2

[chaos1909]

Flexbox-контейнер может перемещать элементы лишь по одной линии либо высота(flex-direction column) либо ширина flex-direction row) вашу задачу нужно решать позиционированием,также можно grid. А если для учебы хотите flex то нужно создать еще одну оболочку

Comments

[Tempest99]

А как сделать это гридом?

[chaos1909]

Tempest99, если по очень простому .... например нам нужно 4 квадрата 200px роскидать по углам родителю даем

display: grid;
grid-template-columns: 200px auto 200px ;

(создаем 3 колонки 1я слева 200px 2я занимает все свобод пространство 3я справа 200px)

grid-template-rows: 200px 200px ; ( также нам нужно 2 ряда) по 200

а наши элементы уже ставим по сетке например синий квадрат стартует с первой линии колонки заканчивается вторым и ряд так же

background-color: blue;
grid-column: 1/2 ;
grid-row:1/2;

[Norum]

chaos1909, не понял ваших объяснений...и не понятно почему именно 3 колонки

[chaos1909]

Norum, в первой колонке квадрат 200px в 3й аналогично а между ними колонка авто она занимает все остальное пространство так наши квадраты всегда прижаты к краям