Scribd
Upload
12 views2 pages

CSS Flexbox

Uploaded by

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

CSS Flexbox

Uploaded by

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

Make Notes from Youtube Videos

It is a way to arrange items of a div element on our webpage. If it has to be centered or if it has to be
arranged in a specific way.

display: flex; ----> this is applied to the parent container containing the items.

for alignment of the elements along main axis, we use justify- content and for cross axis alignment,
we use align- items.

flex- direction: the flex direction determines the direction in which the items will be aligned.

Flex- axis: If the flex direction is horizontal, the horizontal axis is called the main axis and the axis
perpendicular to the main axis, i.e. the vertical axis is called the cross axis. Hence, the direction in
which the items are laid is called the main axis.

flex- wrap: wrap;------ > This wraps the items, preventing it from overflowing. wrap reverse is used
to wrap the items, but in a reverse manner.

If there are more than one lines, then we use align- content to adjust the multiple lines.

flex- flow: direction wrap; -----> Hence, used as a shorthand.

gap: -----> determines the gap between the items.

Properties Applied to the items of the


container:

order ----> This property determines the position of the individual items in the arrangement. The
higher the order, the later it appears. By default, the order is 0.

flex- grow: number; ----> This property is used to determine the space occupied by each element. A
value of 1 means each element will divide the space among themselves and a value of two means the
particular element will occupy the space of two elements.

flex- shrink: number; ---> this property defines the ability of an item to shrink when required. A value
of two means it will shrink with twice the speed when the screen size is reduced.

align- self ---> This is used to align a particular element or item in a flex box.

You might also like