Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

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.

Lighthouse also flags vendor prefix values, such as display: -ms-flexbox. Lighthouse flags these so that you know that you're sending more bytes in your CSS than needed. If you're using Autoprefixer, you can prevent it from printing out vendor prefixes by adding the following rule to your package.json config:

"browserslist": [
  "last 2 versions",
  "not ie <= 10",
  "not ie_mob <= 10"
]

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