MDN align-content, justify-content and justify-items describe baseline as one of their possible values. While baseline makes sense when is used with align-items or align-self, I don't get how it could work along with justify-content, justify-items, justify-self and align-content properties. Do you have any suggestions?
The MDN is not accurate here as there is no baseline for justify-content
If you check the actual Flexbox specification you will see that there is no baseline value for justify-content
Value: flex-start | flex-end | center | space-between | space-around
In the near future and as defined in the CSS Box Alignment Module Level 3 we will have more generic way to align elements and even there baseline is a not a valid value of 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
By the way, there is baseline for justify-items in the new specificiation: https://drafts.csswg.org/css-align-3/#propdef-justify-items but this property doesn't exist in the actual Flexbox specification (same for justify-self)
Related: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
align-content doesn't accept baseline with Flexbox (https://drafts.csswg.org/css-flexbox-1/#align-content-property) but it does in the New Specification
The same apply for CSS grid but you can find justify-items and justify-self there: https://www.w3.org/TR/css-grid-1/#row-align
Actually I don't have a clear example to illustrate the baseline with those properties but I am pretty sure in most of the case it will consider a fallback value as defined in the Spec: