+++
date    = "2022-07-30T01:31:09+00:00"
lastmod = "2022-07-30T17:25:00+00:00"
tags    = [ "webdev"]
author  = "tdro"
+++

[Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
as a base layout is convenient but tricky due to
{{< abbr CLS "Cumulative Layout Shift" >}} or "jank". If the dimensions of the
base flex container(s) are ambiguous, then the browser constantly recomputes the
dimensions as {{< abbr HTML "Hypertext Markup Language" >}} streams in.

My favorite trick is to give the browser dimension hints and avoid computational
properties like [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
Set as many dimensions (width/height) as possible unambiguously. My Internet
speed is sufficiently slow enough that I can see layout shifts in many sites,
including my own (this micro blog).