在 CSS Flex/Grid 中将 `baseline` 值与 `justify-content`、`justify-items` 或 `justify-self` 一起使用是否有意义？

Question

MDN align-content, justify-content and justify-items 将 baseline 描述为其可能的值之一。虽然 baseline 在与 align-items 或 align-self 一起使用时有意义，但我不明白它如何与 justify-content、justify-items、[=21 一起使用=] 和 align-content 属性。你有什么建议吗？

Answer 1

这里的 MDN 不准确，因为 justify-content

没有基线

如果您检查 the actual Flexbox specification，您会看到 justify-content

没有 baseline 值

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

在不久的将来，如 CSS Box Alignment Module Level 3 中所定义，我们将有更通用的方法来对齐元素，即使 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 for justify-items: https://drafts.csswg.org/css-align-3/#propdef-justify-items 但这个属性在实际的 Flexbox 规范中不存在（相同justify-self)

在 CSS Flex/Grid 中将 `baseline` 值与 `justify-content`、`justify-items` 或 `justify-self` 一起使用是否有意义？

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

css

alignment

flexbox

css-grid