在CSS Flex / Grid中使用"baseline"值与"justify-conte



MDNalign-contentjustify-contentjustify-itemsbaseline描述为它们的可能值之一。虽然baselinealign-itemsalign-self一起使用时是有意义的,但我不明白它如何与justify-contentjustify-itemsjustify-selfalign-content属性一起使用。你有什么建议吗?

MDN 在这里不准确,因为没有justify-content的基线

如果您检查实际的 Flexbox 规范,您将看到没有baselinejustify-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-itemsbaseline: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-itemsjustify-self:https://www.w3.org/TR/css-grid-1/#row-align

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

相关内容

最新更新