Scribd
Upload
8 views

Part-12 Flexbox in CSS

Uploaded by

wordlkingplay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Part-12 Flexbox in CSS

Uploaded by

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