Scribd
Upload
15 views7 pages

Part-12 Flexbox in CSS

Uploaded by

wordlkingplay
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
15 views7 pages

Part-12 Flexbox in CSS

Uploaded by

wordlkingplay
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/ 7

@raju_webdev

Part-12
This is the Part-12 from our 'CSS Master'
Series. And in this part we will learn about:

What is flexbox?

Different flexbox properties.

Using CSS Flexbox properties.

visit geekshelp.in if
you want free PDF
and more stuff...

Geeks Help

@raju_webdev www.geekshelp.in
What is flexbox?
The flexbox makes it easier to design a
flexible responsive layout of a web page.

It is used to create a flexible structure


without using float or positioning.

flex display property is used to make flex


display.

Now let's learn more


about flexboxes...

@raju_webdev www.geekshelp.in
flex container properties
flex-direction
This flexbox property is used to specify the
direction of the flexbox container's item.

flex-wrap
This property specifies whether the flex
items should wrap or not.

flex-flow
This is a shorthand property for flex-direction
and flex-wrap.

justify-content
This property is used to horizontally aligns
the flex items.

align-items
This property is used to vertically align the
flex items.

align-content
This property is used to align the flex lines.

@raju_webdev www.geekshelp.in
flex item properties
The direct child elements of a flex container
are flex item.

order
The order property specifies the order of
the flex items.
flex-grow
This property specifies how much a flex
item will grow relative to the rest of the
flex items.
flex-shrink
This property specifies how much a flex item
will shrink relative to the rest of the flex
items.
flex-basis
The flex-basis property specifies the initial
length of a flex item.
align-self
This property specifies the alignment for
the selected item inside the flexible
container.

@raju_webdev www.geekshelp.in
Using Flexbox properties
Example:
visit
geekshelp.in
for more
stuff and
free PDF

Geeks Help

Output:

@raju_webdev www.geekshelp.in
DO YOU FIND IT
HELPFUL

@raju_webdev
I'm Raju, I will help you to provide
amazing content related to web
development and coding.

Geeks Help

www.geekshelp.in

You might also like