Avoids Old CSS Flexbox

Why the audit is important

The old, 2009 specification for Flexbox is deprecated and is 2.3x slower than the latest specification. See Flexbox Layout Isn't Slow to learn more.

How to pass the audit

Under URLs, Lighthouse lists every instance of display: box that it found on your page's stylesheets. Replace every instance with the new syntax, display: flex.

If a stylesheet is using display: box, then it may be using other deprecated Flexbox properties. In short, every property that begins with box, such as box-flex, is deprecated and should be replaced. See CSS Flexbox 2009/2011 Spec Syntax Property Mapping to see exactly how the old properties map to the new ones.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

Lighthouse collects all of the stylesheets used on the page and checks if any of them uses display: box. Lighthouse does not check if the stylesheets use any other deprecated properties.

Feedback