/dev tips

(32) Pause on exceptions Selector matching (34)

Chrome DevTools: Expand CSS shorthand properties

11 May 2015
Expand CSS shorthand properties

In the styles pane, you can expand CSS shorthand properties like flex or padding and see the full range of properties which are defined for you. E.g.

flex: 0 0 45%;

Translates to:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 45%;

Just click the small arrow near the shorthand property to expand it.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.