Почему в CSS Flexbox нет свойств justify-items и justify-self? ⇐ CSS

[Anonymous]

Рассмотрим главную ось и поперечную ось гибкого контейнера:

Источник: W3C
Для выравнивания сгибать элементы вдоль главной оси есть одно свойство:

• Код: Выделить всё

  justify-content

Для выравнивания гибких элементов по поперечной оси есть три свойства:

• Код: Выделить всё

  align-content
  [*]align-items
  [*]align-self

На изображении выше главная ось горизонтальна, а поперечная ось вертикальна. Это направления по умолчанию для гибкого контейнера.
Однако эти направления можно легко поменять местами с помощью свойства flex-direction.

Код: Выделить всё

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;

(Поперечная ось всегда перпендикулярна главной оси.)
Я хочу сказать, что при описании работы осей нет ничего особенного ни в одном из направлений. Основная ось, поперечная ось, они оба равны с точки зрения важности и гибкого направления. позволяет легко переключаться вперед и назад.
Так почему же поперечная ось получает два дополнительных свойства выравнивания?
Почему align-content и align-items объединены в одно свойство для основного ось?
Почему главная ось не имеет свойства justify-self?

Сценарии, в которых эти свойства могут быть полезны:

• размещение гибкого элемента в углу гибкого контейнера
  

  Код: Выделить всё

  #box3 { align-self: flex-end; justify-self: flex-end; }

• выравнивание группы гибких элементов по правому краю (

  Код: Выделить всё

  justify-content: flex-end

  ), но первый элемент должен быть выровнен по левому краю (

  Код: Выделить всё

  justify-self: flex-start

  )

Рассмотрим раздел заголовка с группой элементов навигации и логотипом. С помощью justify-self логотип можно выровнять по левому краю, в то время как элементы навигации остаются далеко вправо, и все это плавно («изгибается») подстраивается под разные размеры экрана.

• в ряду из трех гибких элементов прикрепите средний элемент к центру контейнера (

  Код: Выделить всё

  justify-content: center

  ) и выровняйте соседние элементы по краям контейнера (

  Код: Выделить всё

  justify-self: flex-start

  и justify-self: flex-end).

Обратите внимание, что значения space-around и space-between на

Код: Выделить всё

justify-contentСвойство 

не будет удерживать средний элемент по центру контейнера, если соседние элементы имеют разную ширину.

Код: Выделить всё

#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.box {
height: 50px;
width: 75px;
background-color: springgreen;
}
.box1 {
width: 100px;
}
.box3 {
width: 200px;
}
#center {
text-align: center;
margin-bottom: 5px;
}
#center > span {
background-color: aqua;
padding: 2px;
}

Код: Выделить всё

TRUE CENTER





note that the middlebox will only be truly centered if adjacent boxes are equal width

Версия jsFiddle

На момент написания этой статьи в спецификации flexbox не упоминается justify-self или justify-items.
Однако в CSS Box Alignment Модуль, который представляет собой незавершенное предложение W3C по созданию общего набора свойств выравнивания для использования во всех блочных моделях, выглядит следующим образом:

                                                                                                                                                          Источник: W3C
Вы заметите, что justify-self и justify-items рассматриваются... но не для flexbox.

Подробнее здесь: https://stackoverflow.com/questions/325 ... properties