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

Question

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?

Answer 1

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: