在 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 Flex/Grid 中将 `baseline` 值与 `justify-content`、`justify-items` 或 `justify-self` 一起使用是否有意义？
【发布时间】：2020-09-16 08:00:10
【问题描述】：

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

【问题讨论】：

标签： css flexbox alignment css-grid

【解决方案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

顺便说一句，新规范中有justify-items 的baseline：https://drafts.csswg.org/css-align-3/#propdef-justify-items，但这个属性在实际的 Flexbox 规范中不存在（justify-self 相同）

align-content 不接受带有 Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property) 的 baseline，但它在 the New Specification 中接受

同样适用于 CSS 网格，但您可以在此处找到 justify-items 和 justify-self：https://www.w3.org/TR/css-grid-1/#row-align

实际上我没有一个明确的例子来说明 baseline 的这些属性，但我很确定在大多数情况下它会考虑规范中定义的后备值：

【讨论】：