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

avatar
Michael Benjamin
13 сентября 2015 в 15:30
291226
6
897

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

enter image description here Источник: W3C

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

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

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

Однако эти направления можно легко поменять местами с помощью свойства 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; }

  • выравнивание группы гибких элементов по правому краю (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;
}
<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 по созданию общего набора свойств выравнивания для использования во всех блочных моделях, имеется следующее:

enter image description here Источник: W3C

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


Я закончу повторением главного вопроса:

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

Источник
dholbert
18 сентября 2015 в 17:27
6

Как вы ожидаете, что justify-self будет работать с гибким элементом? Предположим, у вас есть элементы a, b, c, d с дополнительным пространством для распределения вокруг них, а в гибком контейнере есть justify-content: space-between, поэтому они заканчиваются как | a b c d |. Что означало бы добавить, например, justify-self: center или 'justify-self: flex-end` только на элемент' b '? Куда вы его ожидали? (Я вижу несколько демонстраций в одном из ответов здесь, но я не вижу четкого способа, как это будет работать в целом.)

dholbert
18 сентября 2015 в 17:29
0

(В качестве альтернативы: предположим, что у нас есть justify-content: flex-start, поэтому элементы переполнены в начале, например | abcd |. Что вы ожидаете от этого, если вы поместите justify-self: [anything] в элемент 'b' там?)

Michael Benjamin
22 ноября 2015 в 17:09
4

@dholbert, вы писали: Как вы ожидаете, что justify-self будет работать для гибких элементов? Я бы сказал, не так уж и иначе, чем поля auto уже работают на гибких элементах. Во втором примере justify-self: flex-end в элементе d переместит его на дальний край. Это само по себе было бы отличной функцией, которую уже могут делать поля auto. Отправил ответ с демонстрацией.

dholbert
1 декабря 2015 в 08:00
2

В основном я вижу здесь больше вариантов использования, и варианты использования великолепны, но сложность заключается в том, как втиснуть это в фактический способ, которым указаны justify-content и justify-self, поэтому что случаи с конфликтами (например, сценарии, о которых я спрашивал) четко и разумно определены. Как я отметил в своем ответе здесь, {justify|align}-self касается выравнивания элементов внутри большего блока, размер которого не зависит от значения {justify|align}-self - и на главной оси такого блока нет для гибкий элемент, который нужно выровнять.

dholbert
1 декабря 2015 в 08:02
2

RE "ничем не отличается от автоматического поля" - я действительно спрашивал, как вы представляете, как justify-self и justify-content будут взаимодействовать в случаях, когда они конфликтуют (как в сценариях, которые я изложил). Автоматические поля просто не вообще взаимодействуют с justify-content - они крадут все упаковочное пространство до того, как justify-content получит возможность его использовать. Итак, автоматические поля на самом деле не являются хорошим аналогом того, как это будет работать.

Ответы (6)

avatar
Michael Benjamin
22 ноября 2015 в 15:37
1633

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

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

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

Для выравнивания гибких элементов по поперечной оси есть три свойства: align-content, align-items и align-self <22670212670212>.

Затем задается вопрос:

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

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

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

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

justify-content

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

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

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

  • flex-start ~ Элементы Flex упаковываются в начало строки.

    enter image description here

  • flex-end ~ Элементы Flex упаковываются ближе к концу строки.

    enter image description here

  • center ~ Элементы Flex упаковываются к центру линии.

    enter image description here

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

    enter image description here

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

    enter image description here


Автоматические поля

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

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

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


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

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

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

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

enter image description here

enter image description here


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

enter image description here

enter image description here

enter image description here


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

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

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

enter image description here


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

enter image description here

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

Вместо этого кода на гибком контейнере:

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

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

.box56 {
    margin: auto;
}

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


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

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

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

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

enter image description here

enter image description here

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

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

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


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

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

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

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

Как уже отмечалось, если все гибкие элементы не имеют одинаковой ширины или высоты (в зависимости от 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 допускает абсолютное позиционирование гибких элементов. Это позволяет идеально центрировать средний элемент независимо от размера его братьев и сестер.

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

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

enter image description here

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

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

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

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

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

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


justify-content: space-same (concept)

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

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

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

enter image description here

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

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


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

Michael Benjamin
20 марта 2017 в 18:33
4

Приведенный выше ответ охватывает поля основной оси, , justify-content и auto. С другой стороны медали - перекрестная ось , , align-items, align-self и align-content - см. Этот пост: coderhelper.com/q/42613359/35972727>

Jake Z
27 марта 2017 в 20:40
0

Хорошие примеры, но центрирующий аспект все еще нетривиален. Как бы вы отрегулировали Решение № 2: Вложенные гибкие контейнеры , когда средний элемент окружен нечетным количеством элементов? См. этот пример, где подход контейнера приводит к небольшому смещению центрального элемента относительно абсолютного центра, если у нас есть два элемента справа. Как вы заметили, абсолютное позиционирование имеет недостаток в том, что оно удаляется из потока документов, что тоже не идеально.

Michael Benjamin
27 марта 2017 в 20:51
5

@MarkW, вы приводите доводы в пользу свойства justify-self ... auto поля полезны, но justify-self: center было бы идеально. Способ решения представленной вами проблемы - создание невидимых повторяющихся элементов на противоположной стороне. См. Мой ответ здесь: coderhelper.com/q/38948102/3597276

benface
2 августа 2017 в 20:29
8

Теперь ваша концепция space-same стала реальностью. Он называется space-evenly, но на данный момент поддерживается только Firefox: developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Michael Benjamin
2 августа 2017 в 23:03
1

@benface, да ты прав. Спасибо что подметил это. На самом деле я писал о space-evenly в других ответах: coderhelper.com/q/45134400/3597276

Ilya Streltsyn
30 августа 2017 в 16:41
1

Фактически, space-evenly поддерживался в Chrome 57-60, но только для макета сетки. Это была исправленная ошибка, и, начиная с Chrome 61, она также поддерживается для Flexbox. Также есть способ эмулировать его без псевдоэлементов: .item { margin-right: auto } .item:first-child { margin-left: auto }.

Asons
20 сентября 2017 в 09:07
1

Скоро время обновлений :) ... developer.mozilla.org/en-US/docs/Web/CSS/justify-self

Michael Benjamin
20 сентября 2017 в 11:06
0

@LGSon, на этой странице MDN щелкните ссылку на спецификацию. Вы обнаружите, что функция justify-self не применима (и не будет) к гибким элементам. У них даже есть раздел, посвященный этой проблеме: drafts.csswg.org/css-align/#justify-flex

Asons
20 сентября 2017 в 14:40
0

Интересно, что, как и на странице MDN, в разделе «Синтаксис / значение» значение flex-start явно указывает ... контейнер выравнивания, зависящий от гибкого контейнера , стороны основного или перекрестного запуска.

Michael Benjamin
20 сентября 2017 в 16:25
1

@LGSon, да, я это видел. Каким бы хорошим ни был MDN, это все еще информация из вторых рук (и, как видите, возможны человеческие ошибки). Всегда безопаснее обращаться к первоисточнику: W3C. Производители браузеров не ссылаются на MDN. Они используют спецификации.

Matthew Johnson
24 января 2018 в 16:53
0

Следует ли закрыть какие-либо вопросы по гибкому ящику как дубликаты этого? Этот вопрос был закрыт как дубликат. Ясно, что этот пост охватывает все. Просто интересно, должны ли мы закрывать гибкие вопросы общей фразой «вот все, что вам нужно знать», вместо того, чтобы отвечать на конкретные вопросы словами «вот где вы ошиблись».

Michael Benjamin
24 января 2018 в 16:56
1

@MatthewJohnson, что касается вашего связанного вопроса, этот ответ не является «общим» решением. Фактически, он дает конкретное решение описанной проблемы и объяснение. Но если вы не согласны, вы можете проголосовать за повторное открытие.

ChillaBee
22 октября 2020 в 22:04
2

Я действительно надеюсь, что люди в Консорциуме CSS (или как они себя называют) примут во внимание идею оправдывающего себя ... Иногда мне кажется смешным, какие сложные обходные пути вам иногда приходится использовать для достижения решения проблемы ... как будто кто-нибудь действительно знает о тех "уловках", о которых вы упомянули выше;)

Geat
27 ноября 2020 в 20:45
0

Если это кому-то поможет, то margin: auto - это не , а просто альтернатива justify-content: center и align-items: center. Если элемент выходит за пределы родительских границ, переполнение родительского элемента позволит просматривать весь элемент с полосами прокрутки с auto. Это не тот случай, когда он центрируется с помощью гибкости, он выходит за края, а полоса прокрутки ничего не делает.

abstractmind
13 апреля 2021 в 13:15
0

Что, если мне нужно установить выравнивание блока по главной оси со стилями этого блока, в то время как у его родительского элемента установлено justify-content? Является ли это возможным?

Lev Lukomsky
16 сентября 2021 в 17:03
0

Я думаю, что есть еще один вариант использования, который идеально подходит для justify-self - это когда вы хотите, чтобы элемент растягивался, как только он был упакован, в этом случае вы можете написать justify-self: stretch, в настоящее время это невозможно с justify-content и автоматические поля

avatar
Wenfang Du
5 июля 2020 в 12:19
4

Это связано с одномерным характером flexbox и тем, что вдоль оси может быть несколько элементов, что делает невозможным выравнивание одного элемента . Чтобы выровнять элементы по основной встроенной оси в flexbox, вы используете свойство justify-content.

Ссылка: Выравнивание рамки в макете сетки CSS

avatar
Leif Messinger LOAF
17 апреля 2020 в 02:18
1

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

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

avatar
Venryx
20 июля 2019 в 20:45
1

Я знаю, что здесь не используется 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>
Michael Benjamin
21 июля 2019 в 14:38
0

Спасибо за ответ, но он не решает вопрос. Кроме того, есть более простой способ выполнить макет: jsfiddle.net/fga89m2o

avatar
Mark
15 сентября 2015 в 10:18
206

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

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

Я искренне надеюсь, что W3C заметит это и хотя бы рассмотрит. =)

enter image description here

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

enter image description here

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

enter image description here

Zaqx
15 октября 2015 в 02:52
24

@Mark, это потрясающе! Спасибо, что нашли время написать это. Надеюсь, вы не возражаете, но я отправил его здесь: discourse.wicg.io/t/flexbox-justify-self-property/1146

Mark
18 октября 2015 в 19:52
4

@Zaqx конечно, чем больше разоблачения, тем лучше. Серьезно надеюсь, что они найдут способ воплотить это в реальность, хотел бы запачкать мои руки на этом.

Michael Benjamin
23 ноября 2015 в 05:30
1

Привет, Марк, @Zaqx, я опубликовал ответ, который может охватывать некоторые варианты использования, упомянутые в этом ответе. Я обнаружил, что многое еще можно сделать на главной оси без необходимости justify-self и justify-items.

Zaqx
23 ноября 2015 в 09:34
4

@Michael_B Рад, что вы узнали больше о flexbox, и признателен за то, что вы нашли время, чтобы отформатировать свои заметки в ответ. Margin: auto - это действительно круто (хотя вы обнаружите, что браузеры, в которых реализованы версии спецификации flexbox 2009 и 2012 годов, не имеют эквивалентной функции, что резко снижает возможность ее использования на производственном сайте). Однако даже в браузерах, поддерживающих margin: auto, основной вариант использования элемента, который центрирован относительно своего контейнера, пока существует пространство, по-прежнему невозможен без свойства justify-self или аналогичного.

Michael Benjamin
24 ноября 2015 в 14:40
1

@Zaqx, спасибо за отзыв. И да, я согласен с вами, поля auto не являются полной заменой justify-self. Я осторожно сформулировал свой предыдущий комментарий, сказав, что auto поля будут покрыть некоторые варианты использования . Как вы заметили, он не может центрировать элемент на месте, если соседние элементы имеют разные размеры. Однако он предоставляет больше возможностей для выравнивания гибких элементов. Когда я впервые начал изучать flexbox, я думал, что justify-content и невидимые элементы распорки были единственным выходом.

kobako
25 марта 2020 в 06:51
1

Я действительно надеюсь использовать только выравнивание и выравнивание, но не запутывающее поле auto.

Simon_Weaver
29 октября 2021 в 20:10
0

Что касается центрирования чего-то между двумя другими элементами, мне недавно пришлось сделать то же самое, и я придумал использовать сетку css и grid-template-columns: minmax(50px, 1fr) 1200px minmax(100px, 1fr) для центрирования чего-то внутри фиксированных полей. По мере расширения страницы 1-й и 3-й столбцы имеют одинаковый размер (если ширина страницы превышает 1200 + 50 + 100), что означает, что 2-й столбец находится в мертвой точке. Я использовал это для «упругих» полей, но 1-й и 3-й столбцы могли в равной степени содержать фактическое содержимое, и тогда вы, вероятно, использовали бы min-content.

avatar
dholbert
14 сентября 2015 в 16:20
30

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

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

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


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

ТАК: В главной оси гибкого бокса есть много вещей, вокруг которых нужно распределить пространство. Таким образом, свойство *-content имеет смысл, но не свойство *-self.

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

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

Mark
15 сентября 2015 в 09:36
2

Я понимаю, как justify-self может быть проблемой на оси с несколькими элементами, а не с одним элементом. Однако я действительно надеюсь, что они изучат это дальше, в ситуации с несколькими элементами, как будет вести себя justify-self, потому что в некоторых ситуациях это может быть действительно полезно. Например (coderhelper.com/questions/32378953/…).

Michael Benjamin
15 сентября 2015 в 10:26
0

Хорошая находка в этом списке рассылки. Пытаюсь осознать это, так как все еще вижу хорошие возможности использования для justify-self.

dholbert
15 сентября 2015 в 14:11
0

Я добавил немного дополнительных пояснений, объясняя, как *-self относится к случаям, когда у нас есть только , чтобы выровнять только один , тогда как *-content касается случаев, когда у нас есть много вещей, которые нужно выровнять. Это немного проясняет?

Michael Benjamin
22 ноября 2015 в 16:30
0

Да понятнее. Я ценю объяснение. Но, похоже, все сводится к простому предпочтению авторов спецификации, а не к конкретной потребности, основанной на логике. Из списка рассылки , на который вы ссылались,: Свойства * -self работают только в том случае, если дочерний элемент находится совсем один на этой оси. Почему? Похоже, что в этом нет необходимости. Это произвольное решение. Предпочтение. Фактически, поля auto, также являющиеся частью спецификации, позволяют выравнивать * -self с несколькими элементами в строке. Нет четкой причины, по которой свойства ключевых слов тоже не могут.