Blockified flex and grid items

Every in-flow child of a flex or grid container computes to a block-level display, so a nested inline-flex, inline-grid or inline-table item is a real flex, grid or table container: its gap and alignment, grid tracks and table cells all apply.

inline-flex, inline-grid and inline-table as flex items

Images keep their natural size (here 72pt x 36pt)

Left: a grid with img { display:block }. Right: a flex row. An explicit justify-self: stretch stretches the third image across its 110pt track.

text beside it