Scribd
Upload
17 views3 pages

Flexbox

The document provides an overview of Flexbox properties for layout design, including justify-content for horizontal alignment and align-items for vertical adjustments. It explains flex-direction for item arrangement, order for element positioning, and align-self for individual element alignment. Additionally, it covers flex-wrap for item distribution across lines and align-content for line spacing management.

Uploaded by

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

Flexbox

The document provides an overview of Flexbox properties for layout design, including justify-content for horizontal alignment and align-items for vertical adjustments. It explains flex-direction for item arrangement, order for element positioning, and align-self for individual element alignment. Additionally, it covers flex-wrap for item distribution across lines and align-content for line spacing management.

Uploaded by

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

Flexbox

Justify content: for horizontal alignments


When the flex
flex-start: left side
direction is a
flex-end: right side column,

center: obvi justify-content chan


ges to the vertical
space-between: equal space between 2 dabba
and align-items to
the horizontal
space around: equal spacing in dono sides

Align-items: for vertical adjustments


flex-end: bottom me push
flex-start: top me push
center: at the center of the container
baseline: boxes ke andr ke content ka
baseline ke hisaab se adjust
stretch: items are stretched so as to
fit the entire screen

Flex-direction: direction of the individual items, either


row or column
row: placed just like how it is declared [green, yellow, red]
row-reverse: ulta of how it was declared
column: placed in declared order but from top to bottom
column-reverse: placed in reversed order of declared
sequence from top to bottom
Order: every element has order value as 0[zero]
If any element has order value greater, it will be placed
after all the elements having order value as 0, basically
placing in ascending order of their order value

Align-self: similar to align-items, but align-items is used in


parent div, but this is used in particular element div

Flex-wrap: spreading of items


nowrap: fit in singe line
wrap: wrapped in multiple lines
wrap-reverse: wrapped in multiple lines in reversed order

Flex-flow: combination of flex-direction and flex-wrap

Align-content: it is related to line spacing

You might also like