MDNalign-content
,justify-content
和justify-items
将baseline
描述为它们的可能值之一。虽然baseline
与align-items
或align-self
一起使用时是有意义的,但我不明白它如何与justify-content
、justify-items
、justify-self
和align-content
属性一起使用。你有什么建议吗?
MDN 在这里不准确,因为没有justify-content
的基线
如果您检查实际的 Flexbox 规范,您将看到没有baseline
值justify-content
Value: flex-start | flex-end | center | space-between | space-around
在不久的将来,正如 CSS 框对齐模块级别 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
相同(
相关:在 CSS Flexbox 中,为什么没有"justify-items"和"justify-self"属性?
align-content
不接受 Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property( 的baseline
,但它在新规范中可以
这同样适用于CSS网格,但您可以在那里找到justify-items
和justify-self
:https://www.w3.org/TR/css-grid-1/#row-align
实际上,我没有一个明确的例子来说明这些属性的baseline
,但我很确定在大多数情况下,它会考虑规范中定义的回退值: