Разница между оправданием, выравниванием элементов и выравниванием содержимого в CSS Grid

Я действительно смущен. При поиске онлайн-ресурсов и документации большинство документации по этим свойствам, похоже, ссылаются на Flex-box, а не на сетку. И я не знаю, насколько применимо документация для эквивалентных свойств в Flex-box для grid.

Итак, я пробовал ссылку https://css-tricks.com/snippets/css/complete-guide-grid/ , которая определяет их следующим образом:

justify-items – выравнивает содержимое внутри элемента сетки вдоль оси строки

justify-content – это свойство выравнивает сетку вдоль оси строки

justify-self – выравнивает содержимое внутри элемента сетки вдоль оси строки

Но я до сих пор не понимаю, какая разница между ними. Итак, у меня есть 3 вопроса, которые я хочу уточнить.

  1. Является ли свойство justify-items в Flex-box таким же, как свойство justify-items в Grid? или они как-то разные? (Другими словами, могу ли я повторно использовать документацию Flex-box для Grid)
  2. Что делать (оправдывать) содержание, самость и предметы?
  3. Каким образом (justify-) контент, я и предметы разные?

Любые разъяснения были бы весьма признательны.

Изменить: Поскольку все продолжают давать мне ресурсы Flex-box, я спрашиваю о css-grid, а не flex-box.

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

1

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

2-3

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

Хорошо знать:

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

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

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

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

пример

Вот grid 2×3.

  • 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; } 
 
1
2
3
4
5
6

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

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

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

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

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

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

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

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

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

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

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

  • Почему мой jQuery: not () не работает в CSS?
  • Как нарисовать круг в CSS?
  • Стиль дочернего элемента при наведении указателя мыши на родителя
  • Форматирование чисел (десятичные разряды, разделители тысяч и т. Д.) С помощью CSS
  • Можно ли выбрать последние n элементов с nth-child?
  • поддержка размера windows в IE7
  • Поддержание конечного состояния в конце анимации CSS3
  • Проблема при центрировании по вертикали с помощью flexbox, когда высоты неизвестны
  • фон-размер в сокращенном фон-фон (CSS3)
  • Могу ли я применить переход CSS к свойству переполнения?
  • Левая выровненная последняя строка в центрированной сетке элементов
  • Interesting Posts
    Давайте будем гением компьютера.