( container
properties )⤵
(⭐aling-items
⭐aling-content
➡
justify-content)➡ most used
⭐flex-wrap
⭐flex-flow
⭐Gap
Justify-content⤵ will only work with main-axis
when we Justify content center and flex direaction is column it will
alin item center remain in column atcoulumn/left side of contanier
when we Justify content center and flex direaction is row it will alin item
center remain in row at up side of contanier
👿when we use justify content property we need to remember the row and the column
(flex - direaction) will remain same in justify content and aling items 👿
Aling-items⤵ will work with cross-axis
when we aling item center and flex direaction is column it will
alin item center remain in column at up side of contanier
when we aling item center and flex direaction is row it will alin
item center remain in row at coulumn/left side of contanier
flex-wrap ⤵
flex -wrap can be uded in making resonsive web like when we give dispay
flex to a container and reduce the screen size then our flex item gona be shrink
and reduce the size but in case of flex-wrap the item does not shrink and go to
next line
(items properties)⤵
⭐Order
⭐flex-grow
⭐flex-shrink
➡
(aling-self) ➡ most used
Order⤵ this property will help us to change the item order
how high is the order of item will go at the end by default the order
is ( 0 )
Flex-grow ⤵this property will make able an item to take the (n) number of width
if we give the flex-grow 2 an item it will increase its width double then
other
flex-shrink this property shrink an item when screen size got decreased
Aling-selfthis property will help us in aranging the particular item in cotanier
