layout.”^21 AbetteroptionforlayoutwouldbeCSSGrid,whichwe'lltakealookat
inChapter 10.
Creating Simple Grids with flex-wrap
Flexboxalsomakesiteasytocreatecomponentsinagridwiththeflex-wrap
property.Initially,thevalueofflex-wrapisnowrap.Flexitemswillsimplyfillthe
widthofthecontainer,growingorshrinkingasnecessarytofitononeline.Ifwe
setittoflex-wrap: wrap,however,flexitemswilldroptothenextlineiftheir
widthexceedsthatofthecontainer.
Let’sbuildafour-acrossgridbasedonthemarkup:
<div class="grid">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
<div class="delta">D</div>
<div class="epsilon">E</div>
<div class="zeta">F</div>
<div class="eta">G</div>
</div>We’veaddeddisplay: flextoour.gridrulesettotriggeraflexiblelayoutcontext.
We’vealsoaddedflex-wrap: wrapsothatourflexitemswillwrap:
.grid{
display: flex;
flex-wrap: wrap;
}.grid > * {
flex: 0 0 25%;
}Our.grid > *rulesetusestheflexpropertytogiveallitemsaflex-basis(a
width)of25%.Thisgivesustworowsofevenlysizedboxes,showninFigure4.36.
(^21) http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
Complex Layouts 173