Ответ 1

Чтобы ответить на ваши вопросы:

1

Как упоминалось в reiallenramos: "Свойства justify-self и justify-items не реализованы в flexbox. Это связано с одномерной природой flexbox и что может быть множество элементов вдоль оси, что делает невозможным обоснование одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство justify-content." - MDN

2-3

Этот экран, снятый с W3, отлично показывает, что они делают, и различия между ними.

Полезно знать:

Для получения дополнительной информации и примера, я бы предложил вам проверить:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

И для некоторого вдохновения:

• https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Ответ 2

Основные различия между содержанием justify-content, justify-items и justify-self в CSS Grid:

• justify-content управляет выравниванием дорожек сетки (столбцов или строк). Он установлен на контейнер сетки. Это не относится к выравниванию элементов сетки и не контролирует их.
• justify-items управляет выравниванием элементов сетки. Он установлен на контейнер сетки.
• Свойство justify-self переопределяет justify-items для отдельных элементов. Он задается по элементам сетки и по умолчанию наследует значение justify-items.

пример

Здесь сетка 2x3.

• 2 колонки, каждая шириной 100 пикселей
• 3 ряда, каждый 50px tall

Контейнер:

• 500 пикселей в ширину
• Высота 250px

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

Ответ 3

Хорошо, думаю, я понял это благодаря Michael_B. Моя путаница возникла из-за того, что иногда разные свойства беспорядочно ничего не меняют о макете сетки.

justify-content позволяет расположить сетку внутри контейнера сетки. Вот почему свойство justify-content не будет иметь никакого эффекта, если grid-контейнер имеет тот же размер, что и сетка. (Это всегда так, если вы используете fr-единицы). Именно поэтому он может иметь значения: пространство-пространство, пробел между и пространственно-равномерно (в дополнение к началу, концу, центру и растяжке), который разбивает сетку и помещает элементы сетки в контейнер сетки. Это свойство контейнера grid.

justify-items позволяет установить позицию по умолчанию для содержимого, размещенного в элементах сетки сетки (элемент сетки - это поле в сетке, как определено в сообщении Michael_B). Это свойство контейнера сетки.

justify-self позволяет переопределить позицию содержимого по умолчанию в отдельной ячейке. Это приведет к переопределению позиции, заданной параметрами-оправданными. Следовательно, если вы используете justify-self для всех дочерних элементов контейнера, установка атрибутов-выравнивателей в контейнере сетки не будет иметь никакого эффекта. Это свойство содержимого внутри элемента сетки.

Примечание. Если вы сделаете элемент сетки самой сеткой (другими словами, содержимое внутри элемента сетки является сеткой), вы можете поместить его в элемент внешней сетки, используя либо свойство justify-self, либо justify-content на внутреннем контейнере сетки сетки, поскольку контейнер сетки внутренней сетки является одним из содержимого элементов сетки внешней сетки.

Как и следовало ожидать, все это также относится к свойствам align- *.

Пожалуйста, поправьте меня, если у меня что-то не так.

Ответ 4

Justize-self - выравнивание позиции содержимого внутри ячейки по горизонтали.

В то время как align-self - выравнивание позиции содержимого внутри ячейки по вертикали.

Вот результат для выравнивания элементов, используя justify-self: start;

РЕЗУЛЬТАТ ДЛЯ КОДА justify-self: start;