CSS Master

Thatmaynotseemlikesuchabigdeal,butitsimplifiestheCSSnecessaryfora

rangeofuserinterfacepatterns.OneusecaseiscreatingtheHolyGrailoflayout.^20

Here’sourmarkup:

<div class="flex">

<div>...</div>

<div>...</div>

<div>...</div>

</div>

Nowallweneedtodoisadd.flex {display: flex;}toourCSStoendupwith

thelayoutshowninFigure4.35.Thelengthofthecontentinthemiddlecolumn

affectstheheightoftheexteriorcolumns.

Figure 4.35. Flexbox makes columns easy

Usingflexboxforpagelayoutdoeshaveitsrisks,though,asthatwasn'twhatitwas

originallydesignedtodo.Becausecontentaffectslayout,userswithslowerconnec-

tionsmayexperienceajumpinthepagelayoutasthedocumentloads.Thisisex-

plainedingreaterdetailinJakeArchibald’s“Don’tuseflexboxforoverallpage

(^20) https://en.wikipedia.org/wiki/Holy_Grail_(web_design
172 CSS Master