Имеет ли смысл использовать значение baseline с justify-content, justify-items или justify-self в CSS Flex / Grid? - PullRequest
2 голосов
/ 28 мая 2020

MDN align-content, justify-content и justify-items описывают baseline как одно из возможных значений. Хотя baseline имеет смысл при использовании с align-items или align-self, я не понимаю, как он может работать вместе со свойствами justify-content, justify-items, justify-self и align-content. Есть ли у вас предложения?

1 Ответ

1 голос
/ 29 мая 2020

MDN здесь неточен, поскольку нет базовых показателей для justify-content

. Если вы проверите фактическую спецификацию Flexbox , вы увидите, что baseline значение для * отсутствует 1007 *

Value:  flex-start | flex-end | center | space-between | space-around

В ближайшем будущем и, как определено в CSS модуле выравнивания ящиков уровня 3 , у нас будет более общий c способ выравнивания элементов и даже там baseline не является допустимым значением justify-content

Value:  normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

Кстати, в новой спецификации есть baseline для justify-items: https://drafts.csswg.org/css-align-3/#propdef -justify -items , но этого свойства нет в фактической спецификации Flexbox (то же самое для justify-self)

Связано: В CSS Flexbox, почему нет «justify-items» и свойства "justify-self"?

align-content не принимает baseline с Flexbox (https://drafts.csswg.org/css-flexbox-1/#align -content-property ), но поддерживает Новая спецификация


То же самое применимо к CSS сетке, но вы можете найти justify-items и justify-self там: https://www.w3.org/TR/css-grid-1/#row -align

На самом деле у меня нет четкого примера, чтобы проиллюстрировать baseline с этими свойствами, но я почти уверен, что в большинстве случаев он будет рассматривать резервное значение, как определено в Spe c:

...