Scribd
Upload
14 views

FlexBox CSS

Uploaded by

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

FlexBox CSS

Uploaded by

mubeenahmad0670677
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

( 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

You might also like