Center tile layout children on flex cross axis.

Description

The layout-tile layout introduced in does not center items on the cross axis within the main axis. This is important if the items being laid out do not fill the entire space, such as images in an image gallery. So on a horizontal row of portrait-oriented photos, for example, a single landscape-oriented photo would be at the top rather than in the center of the "cell".

This can easily be corrected using align-items:center. See Aligning Items in a Flex Container for more information.

Environment

None

Activity

Show:
Garret Wilson
December 20, 2020, 6:54 PM
Edited

I'm not sure this is exactly what we want to do. It makes images look nice, but do we want to vertically center every <div> as well? Or maybe the idea of "tile" includes this sort of cross-axis centering. If not, we could create a "gallery" layout that does include this centering.

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Critical
Configure