Scribd
Upload
11 views

Flex Box

Uploaded by

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

Flex Box

Uploaded by

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

FlexBox

PROPERTY OF CSS
FlexBox Architecture

 So how does Flexbox architecture work? The flex-items


[Contents] are distributed along the Main Axis and Cross Axis.
And, depending on the flex-direction property, the layout position
changes between rows and columns.
FlexBox Chart
flex-direction

 The Direction/Orientation in which flex-items are distributed


inside flex-container
justify-content

 This property arranges flex-items along the MAIN AXIS inside


the flex-container
align-content

 This property arranges flex-items along the CROSS AXIS inside


the flex-container. This is similar to justify-content
 Please note that, without the flex-wrap property, this property
doesn't work,
align-items

 This property distributes Flex-items along the Cross Axis


align-self

 This property works on the children classes. It positions the


selected item along the Cross Axis
flex - grow | shrink | wrap |
basis
 The properties that we're discussing right now will work when we
resize the window.
 flex-grow : grows the size of a flex-item based on width of the
flex-container.
 flex-shrink : The ability for a flex item to shrink based on width
of the flex-container. Opposite of flex-grow.
 flex-wrap : Amount of Flex-item you want in a line/row.
 flex-basis : This is similar to adding width to a flex-item, but only
more flexible. flex-basis: 10em; it will set the initial size of a flex-
item to 10em. Its final size will be based on available space, flex-
grow, and flex-shrink.
Flex-flow
This is the shortened property for Flex-wrap and Flex-direction.
Flex
This is the shortened property for Flex-grow ,Flex-basis and
Flex-shrink.
Place-content
This is the shortened property for Justify-content
and align-content

You might also like