В CSS Flexbox, почему нет свойств «justify-items» и «justify-self»?

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

                                                                                                                                                   _{Источник: 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;

(Ось креста всегда перпендикулярна главной оси.)

Моя точка зрения при описании работы осей заключается в том, что в обоих направлениях нет ничего особенного. Главная ось, поперечная ось, они одинаковы по важности и flex-directionпозволяют легко переключаться назад и вперед.

Так почему же поперечная ось получает два дополнительных свойства выравнивания?

Почему align-contentи align-itemsобъединены в одно свойство для главной оси?

Почему главная ось не получает justify-selfсвойства?

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

• размещение гибкого элемента в углу гибкого контейнера
  #box3 { align-self: flex-end; justify-self: flex-end; }

• сделать группу из flex-элементов align-right ( justify-content: flex-end), но первый элемент выровнять по левому краю ( justify-self: flex-start)

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

• в ряду из трех гибких элементов прикрепите средний элемент к центру контейнера ( justify-content: center) и выровняйте соседние элементы по краям контейнера ( justify-self: flex-startи justify-self: flex-end).

  Обратите внимание, что значения space-aroundи свойство space-betweenon 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;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

версия jsFiddle

На момент написания этой статьи не упоминалось justify-selfни justify-itemsо спецификации Flexbox .

Однако в модуле выравнивания блоков CSS , который является незаконченным предложением W3C по созданию общего набора свойств выравнивания для использования во всех блочных моделях, есть следующее:

                                                                                                                                                   _{Источник: W3C}

Вы заметите это justify-selfи justify-itemsрассматриваются ... но не для flexbox .

В заключение я повторю главный вопрос:

Почему отсутствуют свойства "justify-items" и "justify-self"?

Методы выравнивания гибких элементов вдоль главной оси

Как указано в вопросе:

Для выравнивания гибких элементов вдоль главной оси есть одно свойство: justify-content

Чтобы выровнять нежесткие элементы вдоль поперечной оси есть три свойства: align-content, align-itemsиalign-self .

Затем возникает вопрос:

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

Один ответ может быть: потому что они не нужны.

Спецификация flexbox предоставляет два метода выравнивания элементов flex вдоль главной оси:

1. Свойство justify-contentключевого слова и
2. auto поля

обосновывать-контент

В justify-contentсовмещается собственности сгибать элементы вдоль главной оси гибкого контейнера.

Он применяется к гибкому контейнеру, но влияет только на гибкие элементы.

Есть пять вариантов выравнивания:

• flex-start Гибкие элементы упакованы в начале линии.

  

• flex-end Гибкие элементы упакованы в конце линии.

  

• center Гибкие элементы упакованы по направлению к центру линии.

  

• space-betweenЭлементы Flex расположены равномерно, первый элемент выровнен по одному краю контейнера, а последний элемент - по противоположному краю. Края , используемые первыми и последние пункты зависят flex-directionи режим записи ( ltrили rtl).

  

• space-around~ То же самое, что и space-betweenс половинными пробелами на обоих концах.

  

Авто наценки

С autoполями , гибкие элементы могут быть отцентрированы, разнесены или упакованы в подгруппы.

В отличие от того justify-content, что применяется к гибкому контейнеру, autoполя относятся к гибким элементам.

Они работают, потребляя все свободное пространство в указанном направлении.

Выровняйте группу изгибаемых элементов справа, но первый элемент слева

Сценарий из вопроса:

• сделать группу из flex-элементов align-right ( justify-content: flex-end), но первый элемент выровнять по левому краю ( justify-self: flex-start)

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

Другие полезные сценарии:

Поместите гибкий элемент в угол

Сценарий из вопроса:

• размещение гибкого элемента в углу .box { align-self: flex-end; justify-self: flex-end; }

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

margin: autoявляется альтернативой justify-content: centerи align-items: center.

Вместо этого кода в контейнере flex:

.container {
    justify-content: center;
    align-items: center;
}

Вы можете использовать это на элементе flex:

.box56 {
    margin: auto;
}

Эта альтернатива полезна при центрировании гибкого элемента, который переполняет контейнер .

Отцентрируйте гибкий элемент и отцентрируйте второй гибкий элемент между первым и краем

Гибкий контейнер выравнивает гибкие элементы, распределяя свободное пространство.

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

В приведенных ниже примерах невидимые третьи гибкие элементы (вставки 61 и 68) представлены для уравновешивания «реальных» предметов (вставки 63 и 66).

Конечно, этот метод не является чем-то большим с точки зрения семантики.

В качестве альтернативы вы можете использовать псевдоэлемент вместо фактического элемента DOM. Или вы можете использовать абсолютное позиционирование. Здесь рассматриваются все три метода: гибкие элементы по центру и снизу.

ПРИМЕЧАНИЕ. Приведенные выше примеры будут работать - с точки зрения истинного центрирования - только когда самые внешние элементы равны высоте / ширине. Когда гибкие элементы имеют разную длину, см. Следующий пример.

Центрируйте гибкий элемент, когда соседние элементы различаются по размеру

Сценарий из вопроса:

• в ряду из трех гибких элементов прикрепите средний элемент к центру контейнера ( justify-content: center) и выровняйте соседние элементы по краям контейнера ( justify-self: flex-startи justify-self: flex-end).

  Обратите внимание, что значения space-aroundи свойство space-betweenon justify-contentне будут сохранять средний элемент по центру относительно контейнера, если смежные элементы имеют разную ширину ( см. Демонстрацию ).

Как уже отмечалось, если все гибкие элементы не имеют одинаковую ширину или высоту (в зависимости от flex-direction), средний элемент не может быть действительно центрирован. Эта проблема дает веские основания для justify-selfсвойства (конечно, для решения задачи).

#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;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Вот два метода решения этой проблемы:

Решение № 1: Абсолютное позиционирование

Спецификация flexbox обеспечивает абсолютное позиционирование элементов flex . Это позволяет среднему предмету быть идеально отцентрированным независимо от размера его родных братьев.

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

В приведенных ниже примерах средний элемент центрируется с абсолютным позиционированием, а внешние элементы остаются в потоке. Но та же схема может быть достигнута и в обратном порядке: отцентрируйте средний элемент по центру justify-content: centerи расположите абсолютно все внешние элементы.

Решение № 2: Вложенные Flex-контейнеры (без абсолютного позиционирования)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Вот как это работает:

• Div верхнего уровня (.container ) - это гибкий контейнер.
• Каждый дочерний .boxэлемент div ( ) теперь является гибким элементом.
• Каждый .boxэлемент дан flex: 1для того, чтобы распределить контейнерное пространство одинаково.
• Теперь элементы занимают все пространство в строке и имеют одинаковую ширину.
• Сделайте каждый элемент (вложенным) гибким контейнером и добавьте justify-content: center.
• Теперь каждый spanэлемент представляет собой центрированный гибкий элемент.
• Используйте гибкие autoполя, чтобы сместить внешние spans влево и вправо.

Вы также можете отказаться justify-contentи использовать autoполя исключительно.

Но justify-contentможет работать здесь, потому что autoполя всегда имеют приоритет. Из спецификации:

8.1. Выравнивание по auto полям

До выравнивания через justify-contentи align-selfлюбое положительное свободное пространство распределяется по автоматическим полям в этом измерении.

justify-content: space-same (концепция)

Возвращаясь к justify-contentминутке, вот идея еще одного варианта.

• space-same~ Гибрид space-betweenи space-around. Гибкие элементы расположены равномерно (как space-between), за исключением того, что вместо полусегментных пробелов на обоих концах space-aroundесть полноразмерные пробелы на обоих концах.

Это расположение может быть достигнуто с ::beforeи ::afterпсевдо-элементов на гибком контейнере.

^{(кредит: @oriol для кода и @crl для метки)}

ОБНОВЛЕНИЕ: Браузеры начали реализацию space-evenly, которая выполняет вышеуказанное. Смотрите этот пост для деталей: Равное пространство между гибкими элементами

PLAYGROUND (включает код для всех примеров выше)

Я знаю, что это не ответ, но я хотел бы внести свой вклад в это дело, чтобы оно того стоило. Было бы здорово, если бы они могли выпустить justify-selfflexbox, чтобы сделать его по-настоящему гибким.

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

Я искренне надеюсь, что W3C это заметит и, по крайней мере, рассмотрит. знак равно

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

Простота создания потрясающих макетов бесконечна, взгляните на этот «сложный» пример.

Это было задано в списке в стиле www, и Таб Аткинс (редактор спецификаций) дал ответ, объясняющий почему . Я подробно остановлюсь здесь.

Для начала давайте предположим, что наш flex-контейнер является однострочным ( flex-wrap: nowrap). В этом случае очевидно, что существует разница в выравнивании между главной осью и поперечной осью - на главной оси есть несколько элементов, уложенных друг на друга, но только один элемент расположен на поперечной оси. Так что имеет смысл иметь настраиваемое для каждого элемента «align-self» на поперечной оси (поскольку каждый элемент выравнивается отдельно), тогда как это не имеет смысла на главной оси (поскольку там пункты выровнены все вместе).

Для многострочного flexbox та же логика применяется к каждой «гибкой линии». В данной строке элементы выровнены по отдельности по перекрестной оси (поскольку в поперечной оси имеется только один элемент на линию), а по основной оси - все вместе.

Вот еще один способ формулируя его: так, все из *-selfи *-contentсвойства о том , как распределить дополнительное пространство вокруг вещей. Но ключевое отличие состоит в том, что *-selfверсии предназначены для случаев, когда на этой оси есть только одна вещь , а версии - для тех случаев, когда на этой оси*-content потенциально много вещей . Сценарии «одно против многих» - это разные типы проблем, поэтому у них есть разные типы опций - например, значения space-around/ space-betweenимеют смысл *-content, но не для *-self.

SO: На главной оси flexbox есть много вещей, которые должны распределять пространство вокруг. Таким образом, *-contentсвойство имеет смысл, но не *-selfсвойство.

В противоположность этому, в поперечной оси у нас есть и a, *-selfи *-contentсвойство. Один определяет, как мы будем распределять пространство вокруг множества линий сгиба ( align-content), а другой ( align-self) определяет, как распределить пространство вокруг отдельных элементов сгиба на поперечной оси в пределах данной линии сгиба.

(Я игнорирую *-itemsсвойства здесь, так как они просто устанавливают значения по умолчанию для *-self.)

Я знаю, что это не использует flexbox, но для простого варианта использования из трех элементов (один слева, один в центре, один справа) это может быть легко достигнуто с помощью display: gridродительского, дочернего элементов grid-area: 1/1/1/1;и justify-selfпозиционирования из тех детей.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Я только нашел свое решение этой проблемы, или, по крайней мере, мою проблему.
Я использовал justify-content: space-aroundвместо justify-content: space-between;.

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