Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
58 views9 pages

Flex Properties CSS

This document is a Flexbox cheatsheet that provides a quick reference for using Flexbox properties in CSS. It covers key properties such as display, flex-direction, justify-content, flex-wrap, align-items, align-content, and alignment of individual items. The cheatsheet is structured as a decision-making guide to help users choose the appropriate Flexbox settings based on their layout needs.

Uploaded by

ashishsinghji1212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views9 pages

Flex Properties CSS

This document is a Flexbox cheatsheet that provides a quick reference for using Flexbox properties in CSS. It covers key properties such as display, flex-direction, justify-content, flex-wrap, align-items, align-content, and alignment of individual items. The cheatsheet is structured as a decision-making guide to help users choose the appropriate Flexbox settings based on their layout needs.

Uploaded by

ashishsinghji1212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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