Support for align-content in block and table layouts

Rachel Andrew

From Chrome 123 you can use the align-content property from CSS Box Alignment on block and table layouts. This will allow block direction alignment without needing to create a flex or grid layout. However, you might need to update your CSS if you have used align-content outside of these layout methods as it will now take effect.

Browser Support

• 123
• 123
• 125
• 17.4

align-content in flex and grid layouts

You have probably used align-content to align flex items or grid tracks. In a flex layout, the align-content property is used on the flex container to align the flex items on the cross axis. In the following example, it has a value of space-between so it is distributing the available space in the flex container between the flex rows.

The align-content property spaces out the rows of flex items, due to the flex container having spare space in the cross axis.

Center an item vertically

Where align-content is particularly useful is in centering an item vertically within a container. To achieve this, use display: flex along with align-content: center. This causes the item to become a flex item, and other default flex item behavior also takes effect. In the following example the heading is centered vertically with align-content: center, this causes the item to shrink to fit the content, and therefore you need to apply flex-grow: 1 to the item.

The align-content property centers the heading vertically within a flex container.

With align-content available for block layout, you will be able to achieve vertical alignment without needing to create a flex layout for the property to work. No additional properties are needed as the item remains a block item, the only change is to the alignment.

The align-content property centers the heading vertically within a block container (needs Chrome 123 or Safari 17.4 or greater).

Test for support of align-content in block layouts

Unfortunately, it's not possible to test for support of align-content in block layout. As align-content has been supported for a long time in flex and grid layout, using feature queries with @supports will always return true. This is the same situation that happened with the gap property in flexbox. The CSS Working Group is exploring a solution for partial implementations like this.

Check your sites for unexpected alignment

The align-content property has been defined for many years in the specification as working on block layouts. As no browser supported align-content outside of these contexts, it did nothing. However, if you have added the property to something that is not a flex or grid container, it will start to have an effect as of Chrome 123. Search your CSS for use of align-content and use the beta to test your sites and applications if this might be the case for you.