4 Weird Tricks To Become A 10x Flexbox Engineer
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A walkthrough of four new Flexbox debugging features added to Chrome and Edge DevTools (version 89). The features include: a visual overlay that highlights flex containers, items, and empty space; alignment icons in the CSS autocomplete popup that show what each property value does; CSS property hover highlights that illuminate affected page areas; and flex badges in the Elements panel plus a Layout panel listing all flex/grid layouts. These tools aim to reduce trial-and-error when authoring and debugging Flexbox layouts by surfacing runtime layout information directly in the browser.
Table of contents
Authoring vs. DebuggingTurning on the featuresTrick 1 - OverlayTrick 2 - Alignment iconsTrick 3 - CSS properties highlightTrick 4 - Badges and Layout panelSort: