Scribd
Upload
8 views

Flowchart-1-2 2

Uploaded by

nandagopalmb7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Flowchart-1-2 2

Uploaded by

nandagopalmb7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Flexbox Cheatsheet Cheatsheet

[email protected]
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

[email protected]
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
[email protected]
OR

justify-content: space-around; on container


Do you want the items on one line or to move to
another when adjusting viewport?

[email protected]
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
[email protected]
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


[email protected]
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

[email protected]
OR
align-content: space-around; on container
Do you want to change the order of the items?

[email protected]
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


[email protected]
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

You might also like