Having Flex Dilemma?
You know how when you’re working with flexbox in different directions it should be obvious when to use align-items and when to use justify-content? No? For me it’s always felt a bit like plugging in a USB cable, somehow I get it wrong the first time every time.
.parent {
display: flex;
flex-direction: row; /*Default value*/
justify-content: center;
}.parent {
display: flex;
flex-direction: column;
align-items: center;
}The thing is, when you use row direction the items flow left to right, so you center them with the help of the flex cell with justify-content. But when you flip to column direction, the flow is top to bottom, and then it’s align-items that takes care of the horizontal centering of the items them selfs.
We’ll dive deeper into alignment soon, but for now just remember the little mantra of justirows and alicolumns (just made them up), it’ll keep you on track until then. Good luck!
