Flexbox Cheatsheet Cheatsheet
maheshghuge2524@[Link]
flex
container
flex items
cross axis
cross axis start
main axis
Cross axis end
Cross axis start Cross axis end
To activate powers
display: flex; on flex container
Do you want rows or columns?
rows columns
flex-direction: row; on container flex-direction: column; on container
OR OR
maheshghuge2524@[Link]
flex-direction: row-reverse; on container flex-direction: column-reverse; on container
Do you want these items located at the
beginning of the main axis?
YES, beginning NO, other
OK, default value has you covered. OK, use one of these
justify-content: flex-start; on container justify-content: flex-end; on container
OR
justify-content: center; on container
OR
justify-content: space-between; on
container
maheshghuge2524@[Link]
OR
justify-content: space-around; on container
Do you want the items on one line or to move to
another when adjusting viewport?
maheshghuge2524@[Link]
One line Move to another
OK, default value has you covered. OK, use one of these:
flex-wrap: nowrap; on container flex-wrap: wrap; on container
OR
flex-wrap: wrap-reverse; on container
How do you want these items laid out on the cross axis?
stretched not stretched
d
maheshghuge2524@[Link]
OK, default value has you covered. OK, use one of these:
align-items: stretch; on container align-items: flex-start; on container
OR
align-items: flex-end; on container
OR
align-items: center; on container
OR
align-items: baseline; on container
maheshghuge2524@[Link]
If you have multiple lines of content, how do you want this aligned?
stretched not stretched
OK, default value has you covered. OK, use one of these:
align-content: stretch; on align-content: flex-start; on container
container
OR
align-content: flex-end; on container
OR
align-content: center; on container
align-content: space-between; on container
maheshghuge2524@[Link]
OR
align-content: space-around; on container
Do you want to change the order of the items?
maheshghuge2524@[Link]
NO YES
Awesome, don't do anything.
That was easy. OK, use these:
D order: <whole number>; on item
Do you need some items to grow if necessary?
NO YES
Awesome, don't do anything. That was easy. OK, use these:
Flex-grow: <whole number>; on item
Do any of these items need to be aligned differently than the others?
NO YES
OK, you're done. That was super easy. OK, use these:
align-self: flex-start; on item
maheshghuge2524@[Link]
OR
align-self: flex-end; on item
OR
align-self: center; on item
OR
align-self: baseline; on item
OR
align-self: stretch; on item
