[id=contact] {
flex: 0 0 25%;
}Eachrulesethasanorder property―that is, except for [id=contact].We’llcome
backtothatpointinamoment.Theorderpropertydeterminesthesequenceofflex
itemsonscreen.Itsvaluemustbeanintegerandnegativevaluesareperfectlyvalid.
Itsinitialvalueis 0.
Withorder,theactualnumbermatterslessthanitsvaluerelativetotheorder
propertyofitssiblings.Asyoucanseeinthepreviousexample,aflexitemwith
order: 1willsucceedaflexitemwithanordervalueof 0 .Thisistruewhether
order: 0isdeclaredorcomputed.That’swhy[id=contact]istheseconditemin
ourdisplayorder.Aflexitemwithorder: -1,ontheotherhand,willprecedea
flexitemwithanordervalueof 0 .Twoitemswiththesameordervaluewillbe
displayedaccordingtotheirorderinthesource.
Vertical Centering with Flexbox
Finally,let’stakealookathowtoverticallycentercontentwithflexbox.Vertically
centeringelementsisoneofthemoredifficulttaskstoachievewithCSS,particularly
iftheheightofyourcontentisunknown.Butwithflexbox,werequirejustoneline
ofCSS:align-items: center:
.flex-container {
display: flex;
align-items: center;
}Thiswillpositionflexitemssothatthereisanequalamountofspaceaboveand
belowtherow,asinFigure4.45.
Complex Layouts 183