Skip to content

Instantly share code, notes, and snippets.

@yogain123

yogain123/Flexbox and Grid

Last active March 14, 2024 10:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yogain123/4423cdabe177ca315e2eb81de86f4cf0 to your computer and use it in GitHub Desktop.
Save yogain123/4423cdabe177ca315e2eb81de86f4cf0 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox and Grid
@yogain123
Copy link
Author

Basics

Screen Shot 2022-10-16 at 3 38 16 PM

Screen Shot 2022-10-16 at 3 39 01 PM

Screen Shot 2022-10-16 at 3 39 41 PM

@yogain123
Copy link
Author

yogain123 commented Oct 16, 2022 •
edited

Flex

Screen Shot 2022-10-16 at 3 47 15 PM
default value is flex

Screen Shot 2022-10-16 at 3 46 56 PM
default value is row

Screen Shot 2022-10-16 at 3 50 52 PM
default value is nowrap

Screen Shot 2022-10-16 at 3 51 48 PM

Screen Shot 2022-10-16 at 3 52 46 PM

Screen Shot 2022-10-16 at 3 52 50 PM

@yogain123
Copy link
Author

yogain123 commented Oct 16, 2022 •
edited

More properties

Screen Shot 2022-10-16 at 3 55 55 PM
default value is flex-start

Screen Shot 2022-10-16 at 4 01 45 PM
default is stretch

Screen Shot 2022-10-16 at 4 01 52 PM
Screen Shot 2022-10-16 at 4 01 59 PM

@yogain123
Copy link
Author

yogain123 commented Oct 16, 2022 •
edited

Align content

Screen Shot 2022-10-16 at 4 08 03 PM

default is flex-start

@yogain123
Copy link
Author

Flex item

Screen Shot 2022-10-16 at 4 09 31 PM

@yogain123
Copy link
Author

yogain123 commented Oct 16, 2022 •
edited

order

by default all flex item has order of 0

Screen Shot 2022-10-16 at 4 11 48 PM

@yogain123
Copy link
Author

flex grow

default is 0

Screen Shot 2022-10-16 at 4 13 27 PM

@yogain123
Copy link
Author

flex shrink

Screen Shot 2022-10-16 at 4 14 12 PM

@yogain123
Copy link
Author

flex-basis

it tell about the initial width of flex item before extra space in the container is distributed
flex grow and flex shrink apply on top of flex basis

@yogain123
Copy link
Author

yogain123 commented Oct 16, 2022 •
edited

flex

Screen Shot 2022-10-16 at 4 19 06 PM

Screen Shot 2022-10-16 at 4 20 41 PM

Note if 1 value, and if its unit like below
flex:40px
then it defaults to flex: 1 1 40px

flex:1
then it defaults to flex: 1 1 auto

flex:2 2
then it defaults to flex: 2 2 auto

flex 2 40px
then it defaults to flex: 2 1 40px

@yogain123
Copy link
Author

align self

Screen Shot 2022-10-16 at 4 21 30 PM

@yogain123
Copy link
Author

GRID

Screen Shot 2022-10-16 at 5 05 10 PM

Screen Shot 2022-10-16 at 5 05 31 PM

Screen Shot 2022-10-16 at 5 06 08 PM
Screen Shot 2022-10-16 at 5 06 19 PM
Screen Shot 2022-10-16 at 5 06 23 PM
Screen Shot 2022-10-16 at 5 06 36 PM
Screen Shot 2022-10-16 at 5 06 41 PM

Screen Shot 2022-10-16 at 5 07 17 PM

Screen Shot 2022-10-16 at 5 07 32 PM
Screen Shot 2022-10-16 at 5 07 37 PM

Screen Shot 2022-10-16 at 5 07 51 PM
Screen Shot 2022-10-16 at 5 07 58 PM

@yogain123
Copy link
Author

more on grid

Screen Shot 2022-10-16 at 5 09 06 PM

Screen Shot 2022-10-16 at 5 08 40 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment