Scribd
Upload
6 views

Flex Box

Uploaded by

InAm khAn
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Flex Box

Uploaded by

InAm khAn
Copyright
© © All Rights Reserved
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