unraveling flexboxmightydeals.s3.amazonaws.com/dealimages/unraveling-flexbox/unra… · flexbox...
TRANSCRIPT
The ultimate guide to building modern CSS layouts with flexbox
UNRAVELING
FLEXBOX
Landon Schropp
SampleVersion1.3
Copyright©2016LandonSchroppLLC
AllRightsReserved
ThisisasampleofUnravelingFlexbox.Thefullversionis
availableforpurchaseatunravelingflexbox.com.
INTRODUCTION
HaveyoueverspenthoursagonizingoveraCSSlayoutthat
justwouldn'twork?Haveyoustruggledwithcolumns,
verticalcentering,floatsorinlinedisplays?Haveyoueven,
gasp,givenupandusedtablesforyourlayouts?
It’stimetosaygoodbyetoallthatpain.FlexboxisaCSS
layoutspecificationthatmakesiteasytoconstructdynamic
layouts.It'sasetoftoolsthatgivesyoumoreflexibilityand
powerwithCSSthanyou'veeverhadbefore.Withflexbox,
verticalcentering,same-heightcolumns,reordering,and
directionagnosticismareapieceofcake.
There'sapopularmythfloatingaroundthatflexboxisn't
readyforprimetimeyet.Wrong!93%ofpeoplearenow
runningabrowserthatsupportsflexbox,andthat
numberisgrowingeveryday.That'sbetterthanthe
supportfortheHTML5<video>element!Youcanuse
flexboxtodayanditwillworkalmosteverywhere!
Thisbookisyourguidetomasteringflexbox.Itwillteach
youtheinsandoutsofallthepropertiesandhowthey
interacttogether.Moreimportantly,itwillshowyouhowto
applythemtoreallayouts.
What'sintheBook?
Thisbookisaboutteachingyoutouseflexboxinthereal
world.TheexamplesineachchapterareastruetolifeasI
couldmakethem.ManyofthemarelayoutsI'vepreviously
builtforpayingclients.Youcanusewhatyoulearnhere
directlyinyourprojects.
Here'sthebreakdown:
Chapter1:GettingDicey
Inthischapter,you'llbuildyourveryfirstlayout,thefacesof
dice!
Chapter2:CraftingTwelve-ColumnLayouts
Learnhowyoucanuseflexboxtobuildtwelve-column
layoutsyou'vealwaysneededagridsystemforinthepast.
Chapter3:BuildingaVideoPlayer
Buildavideoplayerwithflexboxthat'llmakeYouTube's
developersjealous.
Chapter4:SayGoodbyetoVendorPrefixes
I’llshowyouhowtosetupyourenvironmentsoyoucan
ignoreallvendorprefixes.You’llwriteyourcodeonce,andit
willworkeverywhere!
Chapter5:BreakingFreeFromTwelve-Column
Layouts
You'llgobeyondtwelve-columnsandbuildacoolcalendar
layoutintheprocess.
Chapter6:PerfectPricing
Createapricinglayoutthatwillfeelrightathomeonany
marketingsite.
Chapter7:FlexboxForms
Flexboxisn'tjustforfull-pagelayouts!Inthischapter,you'll
learnhowtouseflexboxtobuildsmall,reusableform
controls.
Chapter8:ResponsiveDesign
Learnhowtoharnessflexboxforresponsivelayoutsthat
workgreatonbothdesktopandmobile.
Chapter9:WrappingLikeaBoss
Saygoodbyetofloatsandclearfixes.You'llbeusingflexbox's
fantasticwrappingcontrolsfromnowon.
Chapter10:ProgressiveEnhancement
You'lllearnhowtotakeadvantageoftheflexboxgoodness
andstillsupportInternetExplorer9andbelow!
Chapter11:Ordering
Theorderoftheelementsonyourscreendoesn'thaveto
matchtheorderintheHTML.Thischapterwillshowyou
howtoreordertheseelementswithflexbox.
Chapter12:Cross-BrowserTesting
You'lllearnhowtotestyourcodeacrosseverymajorbrowser
anddevice.
Chapter13:HowtoWriteaGridSystem
Haveyoueverwonderedhowgridsystemslike960gswork?
Inthischapteryou'llcreateyourveryownflexboxgrid
system.
Chapter14:Minesweeper
You'lluseeverythingyou'velearnedinthisbooktobuildan
awesomeMinesweeperlayout!
Whenabookcontainstoomanydetails,it'sdifficulttocatch
theimportantpoints.InthisbookI'veomittedstylesthat
don'tapplytoflexbox,suchastypography,colorsand
borders.Ifyou'dliketoseeallofthestylesforachapter,
takealookatthecodeexamples.
CodeExamples
TheexamplesforthisbookarepoweredbyMiddleman,a
staticsitegeneratorthatmakesiteasytobuildHTMLand
CSSwebsites.Thereareseveralwaysforyoutoaccessthe
examplecode:
Thelastoptionistrickierthanthefirstthree,soI'donly
recommenditifyou'refeelingambitious.Ifyou'reaMac
user,I'verecordedavideotomaketheinstallationprocess
easierforyou.Ifyou'reaWindowsuser,there'scurrentlya
buginMiddlemanpreventingyoufromrunningthe
examples.
Thefirststepistoinstalltheproject'sdependencies:
ViewthesourceonGitHub.•
Downloadthecompiledbuild.•
Browsethehostedexamples.•
Runtheexampleserveryourself.•
Ruby•
Git•
NodeJS•
Bundler•
Next,clonetheproject'sGitrepositoryandswitchintothat
directory.
gitclone"https://github.com/"\
"LandonSchropp/unraveling_flexbox"
cdunraveling_flexbox
UseBundlertoinstalltheproject'sgemdependencies.
bundleinstall
Finally,startuptheMiddlemanserver.
bundleexecmiddleman
Ifeverything'ssetupcorrectly,youcannavigateto
http://localhost:4567toviewtheexamples.
Acknowledgements
I'dliketothankmywife,Danielle,forallhersupportin
writingthisbook.I'vespenttoomanyeveningshunched
overmycomputerinsteadofhangingoutwithher.Notonly
didshetoleratemyinsanity,butshegavealargeportionof
herowntimetoeditingthisbook.LoveyouDanielle!
I'dalsoliketothankmybetareaders,especiallyJoshua,
Darrin,Andrew,DucandChristine.Youguysmadeahuge
differenceinthequalityofthisbook,andIreallyappreciate
it!
EnoughChitchat
Let'sdivein.WelcometoUnravelingFlexbox!
CHAPTER 1
Getting Dicey
Thesixdicefaces
Thebestwaytolearnflexboxistorollupyoursleevesand
writesomecode.Inthischapter,I’llwalkyouthroughyour
veryfirstflexboxlayout:thefacesofdice!
TheFirstFace
Astandardplayingdieconsistsofsixfaces(sides).Eachface
hasanumberofpips(dots)whichdeterminethevalueofthe
side.Thefirstsideconsistsofasinglepipinthecenterofthe
face.
Let'sstartbywritingtheHTMLforthefirstface.
<divclass="first-face">
<spanclass="pip"></span>
</div>
Tomakelifealittleeasier,I’veaddedthebasicstylesforthe
facesandthepips.Here'swhatitlookslike:
Thefirststepistotellthebrowsertomakethefaceaflexbox
container.
.first-face{
display:flex;
}
Itdoesn'tlookanydifferent,butthere'salotgoingonunder
thehood.
Theflexboxcontainer'smainaxisandcrossaxis
Thefirst-facecontainernowhasahorizontalmainaxis.
Themainaxisofaflexcontainercanbehorizontalor
vertical.Thedefaultishorizontal.Ifweaddedanotherpipto
theface,itwouldshowuptotherightofthefirstone.The
containeralsohasaverticalcrossaxis.Thecrossaxisis
alwaysperpendiculartothemainaxis.
Thejustify-contentpropertydefinesthealignmentalong
themainaxis.Sincewewanttocenterthepipalongthe
mainaxis,we'llusethecentervalue.
.first-face{
display:flex;
justify-content:center;
}
Allright!Sincethemainaxisishorizontal,thepipisnow
centeredintheparentelement.
Thealign-itemspropertydictateshowtheitemsarelaid
outalongthecrossaxis.Becausewewantthepiptocenter
alongthisaxis,usethecentervalueheretoo.
.first-face{
display:flex;
justify-content:center;
align-items:center;
}
Andjustlikethat,thepipiscentered!Horizontallyand
Verticallycenteringanelementwasoneofthehardesttricks
toaccomplishinCSSbeforeflexbox,andyou'vedoneitina
fewlinesofcode!
GettingTrickier
Onthesecondfaceofadie,thefirstpipisinthetopleft
cornerandthesecondisinthebottomright.That'salso
prettyeasytodowithflexbox!
Again,startwiththemarkupandthebasicCSS.
<divclass="second-face">
<spanclass="pip"></span>
<spanclass="pip"></span>
</div>
.second-face{
display:flex;
}
Nowyouhavetwopipsrightnexttoeachother.Thistime
around,thepipsshouldbeonoppositesidesoftheface.
There'savalueforjustify-contentthatwillletusdojust
that:space-between.
Thespace-betweenvalueevenlyfillsthespacebetweenflex
items.Sincethereareonlytwopips,thispushesthemaway
fromeachother.
.second-face{
display:flex;
justify-content:space-between;
}
Here'swherewerunintoaproblem.Unlikebefore,youcan't
setalign-itemsbecauseitwillaffectbothpips.Luckily,
flexboxincludesalign-self.Thishandypropertyletsyou
alignindividualitemsinaflexcontaineralongthecross
axis!Thevalueyouwantforthispropertyisflex-end.
.second-face{
display:flex;
justify-content:space-between;
}
.second-face.pip:nth-of-type(2){
align-self:flex-end;
}
Looksgood!
HorizontalandVerticalNesting
Let'sskipthethirdfaceandtacklethefourth.Thisoneisa
littletrickierthantheothersbecauseweneedtosupporttwo
columns,eachwithtwopips.
Therearetwothingsaboutflexboxthatwillsaveyouhere:
flexcontainerscanhaveverticalorhorizontalcontent,and
flexcontainerscanbenested.
Unlikebefore,themarkupwillnowincludecolumns.
<divclass="fourth-face">
<divclass="column">
<spanclass="pip"></span>
<spanclass="pip"></span>
</div>
<divclass="column">
<spanclass="pip"></span>
<spanclass="pip"></span>
</div>
</div>
Sinceyouwantthetwocolumnstobeonoppositesides,go
aheadandusejustify-content:space-betweenlikeyou
didbefore.
.fourth-face{
display:flex;
justify-content:space-between;
}
Next,youneedtomakethecolumnsflexcontainers.Itmight
seemliketheyalreadyare,butrememberthatyouhaven't
setdisplay:flexyet.Youcanusetheflex-direction
propertytotosetthedirectionofthemainaxistocolumn.
.fourth-face{
display:flex;
justify-content:space-between;
}
.fourth-face.column{
display:flex;
flex-direction:column;
}
Itdoesn'tlookanydifferent,butthecolumnsarenowflex
containers.Noticehowyoustuckaflexcontainerdirectly
insideanotherflexcontainer?That'sokay!Flexboxdoesn't
careifthecontainersarenested.
Thefinalstepistospacethepipsapartfromeachother.
Sincethemainaxisforthecolumnsisvertical,youcanuse
justify-contentagain.
.fourth-face{
display:flex;
justify-content:space-between;
}
.fourth-face.column{
display:flex;
flex-direction:column;
justify-content:space-between;
}
Note:Thisfacecouldhavebeenbuiltwithoutcolumnsbyusing
wrapping.I'llcoverwrappinginmoredetailinChapter9.
WrappingUp
Woohoo!Threefacesdownandthreetogo.Atthispoint,
youhaveeverythingyouneedtobuildtheotherthree.Give
itashot!Whenyou'redone,takealookatthecodeexamples
fortheanswers.
CHAPTER 2
Crafting Twelve-Column Layouts
Inatwelve-columnlayout,thepageisbrokenapartinto
twelveinvisiblecolumns.Thesecolumnshavesmall
amountsofspacebetweenthem,calledgutters.Thepageis
dividedintorows,andthecontainersintherowstakeupa
certainnumberofcolumns.
Atwelve-columngridwithcolumnsandgutters
Ifyoulookforthem,you'llstarttoseetwelve-column
layoutseverywhere.Takealookattheselandingpagesfrom
Heroku,ChowNowandSquare.Noticehowthesectionsare
brokenupintohalves,thirdsandfourths?
Inthischapter,I'llshowyouhowtousetheflex-grow,
flex-shrinkandflex-basispropertiestobuildtwelve-
columnlayouts,withouttheneedforalibrary!
Examplesoftwelve-columnlayoutsfromHeroku,ChowNowandSquare
SettingUptheContainer
Let'ssayyouwanteachofthe<div>elementsinthe
followingHTMLtotakeupathirdofthe<section>.
<section>
<divclass="column">First</div>
<divclass="column">Second</div>
<divclass="column">Third</div>
</section>
Bydefault,the<section>elementtakesup100%ofthe
widthofthescreen.Startbylimitingitswidthto740pixels.
Whileyou'reatit,alsoaddguttersaroundthecolumns.
section{
max-width:740px;
margin:0auto;
}
.column{
margin:10px;
}
Popopenthecodeexamplesandtrydraggingyourbrowser
windowuntilit'ssmallerthan740pixels.Noticehowthe
<section>getssmallerasthescreenshrinks,butstaysfixed
whenthescreenislargerthan740pixels?
Flexin'ItUp
Makethe<section>aflexcontainerlikeyoudidin
Chapter1.
section{
max-width:740px;
margin:0auto;
display:flex;
}
Bydefault,flexboxsetsthewidthsofthecolumnstothesize
oftheircontent.Youcanchangethisbehaviorbyusingthe
flex-growandflex-shrinkproperties.
Theflex-growpropertytellsflexboxhowtogrowtheitem
totakeupadditionalspace,ifnecessary.flex-shrinktells
flexboxhowtoshrinkwhennecessary.Sincewewantthe
columnstobehavethesamewhilegrowingandshrinking,
setbothofthesepropertiesto1.
.column{
margin:10px;
flex-grow:1;
flex-shrink:1;
}
Woohoo!Theflexboxcontainernowfillsupthreecolumns.
Thevaluesforflex-growandflex-shrinkareproportional,
meaningtheychangerelativetootheritemsintheflex
container.Flexboxaddsthevaluesforthepropertiesand
thendivideseachcolumn'svaluebythatsum.Soeach
columntakesup1÷(1+1+1),or⅓ofthetotalspace.
Whathappensifoneofthecolumnshasadifferentvalue?
.column:first-of-type{
flex-grow:2;
flex-shrink:2;
}
Thefirstcolumntakesupthesameamountofspaceasthe
othertwo.That'sbecausethevaluesaddupto4,sothefirst
columnis:
2÷(2+1+1)=½
Theothertwoare:
1÷(2+1+1)=¼
AllAboutThatBasis
Ifyoulookcloselyatthelastexample,you'llnoticethatthe
firstcolumndoesn'tquitecoverhalfofthecontainer.Ifyou
addmorecontenttothethirdcolumn,youcanreallyseethe
problem.
<section>
<divclass="column">First</div>
<divclass="column">Second</div>
<divclass="column">
Thethirdcolumn,withmorecontentthan
before!
</div>
</section>
What'sgoingon?Whyisflexboxnotflexingcorrectly?
Itturnsoutflexboxdoesn'tdistributespaceevenlytoeach
column.Itfiguresouthowmuchspaceeachcolumnstarts
with,specifiedbytheflex-basisproperty.Then,the
remainingspaceisdistributedusingtheflex-growand
flex-shrinkproperties.
Thismightseemconfusing,andthat'sbecauseitis.Theway
thisstuffaddsupisreallydamncomplicated,butdon't
worry,youdon'tneedtounderstandthenuancestouse
flexbox.
Sincewedon'tcareabouthowmuchspacethecontent
originallytakesup,setflex-basisto0.
.column{
margin:10px;
flex-grow:1;
flex-shrink:1;
flex-basis:0;
}
.column:first-of-type{
flex-grow:2;
flex-shrink:2;
flex-basis:0;
}
Tah-dah!Itworks!Well,kindof—there'sonelastthingto
fix.
MoreFlexBasis
Ifyouaddanothersectionbelowthefirst,youcanseethe
problem.
<section>
<divclass="column">First</div>
<divclass="column">Second</div>
<divclass="column">Third</div>
</section>
<section>
<divclass="column">First</div>
<divclass="column">Second</div>
<divclass="column">Third</div>
<divclass="column">Fourth</div>
</section>
.column{
margin:10px;
flex-grow:1;
flex-shrink:1;
flex-basis:0;
}
section:first-of-type.column:first-of-type{
flex-grow:2;
flex-shrink:2;
flex-basis:0;
}
Whydon'tthecolumnslineup?It'sbecauseflexboxincludes
thepadding,borderandmargininthebasiswhenit
calculateshowbigtheitemshouldbe.
Thefirstandsecondcolumnsinthesecondrowhave22
pixelsbetweenthem(20pixelsforthegutterand2pixelsfor
theborders).Wecanaddthismissingspacetothefirst
columninthefirstrowbysettingflex-basisto22px.
section:first-of-type.column:first-of-type{
flex-grow:2;
flex-shrink:2;
flex-basis:22px;
}
Shorthand
Together,flex-grow,flex-shrinkandflex-basisformthe
cornerstoneofwhatmakesflexboxflexible.Sincethese
propertiesaresocloselytiedtogether,there'sahandy
shorthandproperty,flex,thatletsyousetallthree.Youcan
useitlikethis:
flex:<flex-grow><flex-shrink><flex-basis>;
WecanrewriteourCSStolooklikethis:
.column{
flex:110px;
}
section:first-of-type.column:first-of-type{
flex:2222px;
}
Ahh,that'sbetter.Whythe0pxinthefirstflexdeclaration?
There'sabuginInternetExplorer10and11thatignores
flexifthebasisdoesn'tincludeaunit.
That'sIt!
You'vecoveredatonofgreatstuffinthischapter,including
flex-grow,flex-shrinkandflex-basis.You'vealsoseen
howthesepropertiescanbeusedtoimplementtwelve-
columnlayouts.
Ifyou'relookingforachallenge,tryfinishingofftheentire
grid.Here'swhatitlookslikecompleted.
Ifyou'restillconfusedabouthowflex-grow,flex-shrink
andflex-basiswork,don'tworry.Thesepropertiesarethe
hardestthingtounderstandaboutflexbox.You'llbe
reviewingthemagaininlaterchapters,includingthenext
chapter,whereyou'llbuildanawesomevideoplayerlayout!
CHAPTER 3
Building a Video Player
What'sthebestpartaboutwatchingamovie?Isitthesalty
popcornthatcoatsyourfingertipsinhot,meltedbutter?How
aboutthemountainsofcrunchycandyorthemonolithic
soda?Coulditbethespecialeffectsandexplosions,orthe
rawtalentoftheactorsandactresses?Maybeit'sthe
profoundcinematographyorthemovingmusicalscore?
Ofcoursenot!It'stheplaybackcontrolsforthevideoplayer,
andinthischapter,you'regoingtolearnhowtomakethem!
I'llshowyouhowtobuildthekillerlayoutyouseeabove
usingflexbox!
Lights,Camera,Action!
Ifyoulookatthevideoplayerscreenshotabout,you'llnotice
thatitcanbecleanlydividedintomultiplesections.
Let'sstartbycapturingthisstructureinHTML.
<divclass="video-player">
<imgsrc="hot_air_balloons.jpg"alt="Video"
width="960"height="540">
<divclass="controls-container">
<divclass="controls">
<divclass="top-controls">
<divclass="volume-controls"></div>
<divclass="playback-controls"></div>
<divclass="size-controls"></div>
</div>
<divclass="progress-controls"></div>
</div>
</div>
</div>
Hereyou'vecreatedacontainerforthevideoplayer.
Normally,insidethatcontaineryou'dusea<video>element,
buttomakelifeeasierwe'llusean<img>element.
Insidethevideoplayercontainerisa<div>withaclassof
controls-container,whichwillbeusedfor—youguessedit
—containingthecontrols.Thetoprowofthecontrolsissplit
intothevolumecontrols,theplaybackcontrolsandthesize
controls.Thebottomrowisdevotedtotheprogresscontrols.
TheContainer
Thefirstthingyouneedtodoiscenterthevideoplayer
controlsinthecontainer.Youcandothisbyabsolutely
positioningthecontrolscontaineroverthetopofthevideo
player.Thisallowsthevideoplayer<div>tobedetermined
bythesizeoftheimageinsideofit.Whileyou'reatit,add
someCSStosizethecontrolscontainersoyoucanseeit.
.video-player{
position:relative;
}
.controls-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.controls{
width:480px;
margin-bottom:32px;
padding:12px4px;
}
Whatwewantisforthecontrolstobepositionedinthe
bottomcenterofthecontrolscontainer.Youcanaccomplish
thatsettingthecontrolcontainer'sdisplaypropertytoflex
andusingalign-itemsandjustify-content.
.controls-container{
...
display:flex;
justify-content:center;
align-items:flex-end;
}
Thereyougo!Nowyouhaveanicelypositioned<div>for
yourcontrols.
TheProgressControls
Thenextstepistobuildtheprogresscontrols.TheHTMLfor
theseisprettystraightforward.
<divclass="progress-controls">
<spanclass="time-elapsed">00:00:00</span>
<inputtype="range">
<spanclass="time-remaining">01:14:26</span>
</div>
Theideahereistoplacethetimeelapsedandtimeremaining
<span>elementsontheleftandrightofthecontainer,
respectively.The<input>thenfillsuptheremainingspace.
.progress-controls{
display:flex;
}
.time-elapsed,.time-remaining{
flex:00auto;
}
.progress-controlsinput[type="range"]{
flex:110px;
}
What'sthatautovalue?Settingtheflex-basistoautotells
flexboxtoresizethecontainerbaseduponthesizeofthe
content.Inthiscase,thetimeelapsedandtimeremaining
spanstakeupasmuchroomastheyneed.Then,theprogress
controlscontainerstretchestotakeuptherestofthespace.
TheTopControls
Thetopcontrolsarealittletrickierthanthebottomcontrols.
<divclass="top-controls">
<divclass="volume-controls">
<button>
<imgalt="LowVolume"
src="low_volume.svg">
</button>
<inputtype="range">
<button>
<imgalt="HighVolume"
src="high_volume.svg">
</button>
</div>
<divclass="playback-controls">
<button>
<imgalt="Rewind"src="rewind.svg">
</button>
<button>
<imgalt="Play"src="play.svg">
</button>
<button>
<imgalt="FastForward"
src="fast_forward.svg">
</button>
</div>
<divclass="size-controls">
<button>
<imgalt="Fullscreen"
src="fullscreen.svg">
</button>
</div>
</div>
Themarkupdoesn'tlookverynice,butit'lldothejob.It
mainlyconsistsofbuttonscontainingimagesand<div>
containers.
Thefirststepinstylingthetopcontrolsistodisplaythem
sidebyside.Inordertodothat,youneedtosetthetop
container'sdisplaytoflex.Remember,thedefaultvaluefor
flex-directionisrow,sothecontainer'scontentswillbe
displayedhorizontally.Whileyou'reatit,addalittlemargin
tothebottomofthetopcontrols.
.top-controls{
display:flex;
margin-bottom:8px;
}
Tomakethevolumecontrols,playbackcontrolsandsize
controlshorizontal,you'llalsomakeeachaflexcontainer.
Youcanusealign-itemstoverticallycentertheircontent.
.volume-controls,
.playback-controls,
.size-controls{
display:flex;
align-items:center;
}
Next,youneedtospacethemout.Youmaybethinkingyou
canmakethevolumecontrolsandsizecontrolscontainer
sizetotheircontent,andhavetheplaybackcontrolsstretch
tofitthecontainerusingflex-growandflex-shrink.
However,ifyoutrythat,you'llendupwithcontrolsthatlook
likethis:
Noticehowtheplaybackcontrolsaren'tcentered?Instead,
you'llmaketheplaybackcontrolscontainersizetoits
contentandletthevolumeandsizecontrolsexpand.
.playback-controls{
flex:00auto;
}
.volume-controls,.size-controls{
flex:110px;
}
Thisworksbecausetheflex-basisoftheplaybackcontrols
isauto,soplaybackcontrolscontainerissizedtothebuttons
itcontains.Thevolumeandsizecontrolsthenevenlyfillthe
remainingspace.
Next,aligntheitemsinthesizecontrolscontainertothe
end.
.size-controls{
justify-content:flex-end;
}
Theverylaststepistoaddasmallmarginaroundthe
buttonsandtimeelements.
button,.time-elapsed,.time-remaining{
margin:08px;
}
That'sit!Twothumbsup!
Fin
Thenexttimeyou'rereadytokickbackandwatchyour
favoriteactionflick,rememberyoucanrebuildtheplayback
controlsusingyourownflexboxkungfu.
CONCLUSION
ThanksforReading!
ThanksforreadingthissampleofUnravelingFlexbox.Ihope
you'veenjoyedit!You'velearnedquiteabitaboutflexboxso
far,butthere'ssomuchmoreintheelevenchaptersyou
haven'tseenyet.
Inthefullbook,you'lllearnhowto:
PurchaseUnravelingFlexbox
Gobeyondtwelve-columnstobuildlayoutsthat
werepreviouslyimpossible.
•
Buildresponsiveflexboxlayoutsthatworkgreat
inmobile,tabletanddesktopbrowsers.
•
Supportolderbrowserswhilestillusingflexbox.•
Implementkillerflexboxformcontrols.•
Createvideoplaybackcontrolswithflexbox.•
Buildlayoutsthatwrapacrossmultiplelines.•
Writeyourveryownflexboxgridsystem.•
Testandfixyourcodeacrossallmobileand
desktopbrowsers.
•
Styleaflexible,tieredpricinglayout.•
Useflexboxtoreorderelementsonapage.•
Useeverythingyou'velearnedtobuildan
insanelyawesomeMinesweeperlayout.
•