Scribd
Upload
17 views1 page

Flexbox Notes

The document explains the use of Flexbox in CSS, detailing how to arrange elements within a container using properties like 'display: flex', 'flex-direction', and 'justify-content'. It covers various flex-direction options (row, row-reverse, column, column-reverse) and how to manage spacing with 'justify-content', 'flex-wrap', 'align-items', and 'align-content'. Overall, it provides a concise guide on controlling layout and spacing in a flexbox container.

Uploaded by

solankesnehal96k
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
17 views1 page

Flexbox Notes

The document explains the use of Flexbox in CSS, detailing how to arrange elements within a container using properties like 'display: flex', 'flex-direction', and 'justify-content'. It covers various flex-direction options (row, row-reverse, column, column-reverse) and how to manage spacing with 'justify-content', 'flex-wrap', 'align-items', and 'align-content'. Overall, it provides a concise guide on controlling layout and spacing in a flexbox container.

Uploaded by

solankesnehal96k
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

02:

there is an outer <div> element known as container and other inner <div>. if we
specify (display:flex;) in our css to a container it will be a flex and arrange the
elements in row. and if you want to arrange it in columns then assign (flex-
direction: row;) in css file to a container.

03:
Flexbox Direction

It sets how flex items are placed in the flex container, along which axis and
direction.

flexbox-direction :row; //main axis, left to right

flexbox-direction: row-reverse; //main axis, right to left

flexbox-direction :column; //main axis, top to bottom

flexbox-direction: column-reverse; //main axis, bottom to top

04:
Justify Content
Tells how the browser distributes space between and around content items along the
main-axis

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

>>justify-content: space-evenly;

05:
Sets whether flex items are forced onto one line or can wrap onto multiple lines

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

06:
Align Items
Distributes our items along the cross axis
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;

07:
Align Content
it sets the distribution of space between and around content items along a
flexbox'x cross-axis

align-content:flex-start/flex-end/center
align-content:space-between/space-around/evenly
align-content:baseline;

You might also like