Scribd
Upload
227 views

CSS Flexbox Full

Flexbox is a new layout mode for building one-dimensional layouts. It allows elements to be aligned and distributed in different directions and orders. Flexbox properties include flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, align-self, order, flex-grow, flex-shrink, and flex-basis. These properties give flexibility in how elements are laid out in different configurations and alignments both horizontally and vertically.

Uploaded by

Haroon hayat
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
227 views

CSS Flexbox Full

Flexbox is a new layout mode for building one-dimensional layouts. It allows elements to be aligned and distributed in different directions and orders. Flexbox properties include flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, align-self, order, flex-grow, flex-shrink, and flex-basis. These properties give flexibility in how elements are laid out in different configurations and alignments both horizontally and vertically.

Uploaded by

Haroon hayat
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/ 10

CSS Flexbox:

• Flexbox is a new way to build one-dimensional layout.


• Flexbox used for easy alignment of element in different direction and orders.

Flexbox Properties:
• Flex-direction • Justify-content
• Flex-wrap • Align-item
• Flex-flow • Align-content
• Flex-shrink • Align-self
• Flex-basis • Order
• Flex-grow
I. Flex-direction:
Value:
• Row
• Row-reverse
• Column
• Column-reverse
1. Flex-direction: Row;

2. Flex-direction: Row-reverse;

3. Flex-direction: Column;
4. Flex-direction: Row-reverse;

II. Flex-Wrap:
Problem:

Value:
• No-wrap
• Wrap
• Wrap-reverse

1. Flex-wrap: No-Wrap (Default);


2. Flex-wrap: Wrap;

Row

3. Flex-wrap: Wrap-Reverse;

Column

Row
Column

III. Flex-Flow:
Flex-Flow is the shorthand of the Flex-Direction and Flex-Wrap properties.

Flex-Flow: Flex-Direction Flex-Wrap;


For Example: Value of Flex-Wrap
Flex-Flow: Row Wrap;
Value of Flex-Direction
IV. Justify-Content:
Justify-Content is used for horizontal alignment.

Values:
• Flex-Start
• Flex-End
• Center
• Space-Between
• Space-Around
• Space-Evenly

Justify-Content: Flex-Start;

Justify-Content: Flex-End;

Justify-Content: Center;
Justify-Content: Space-Between;
In Space-Between value the First and Last Flex-item attached end-to-end and all
space is divided within other Flex-items.

Justify-Content: Space-Around;
In Space-Around value every Flex-Item have equal space at right and left side.

Justify-Content: Space-Around;
In Space-Evenly value there is equal space between all Flex-Items

V. Align-Item:
Align-Item is used for vertical alignment of Flex-Items.

Values:
• Stretch
• Flex-Start
• Flex-End
• Center
• Baseline
Align-Item: Stretch (Default);

Align-Item: Flex-Start;

Align-Item: Flex-End;
Align-Item: Center;

Align-Item: Baseline;
Align-Item: Baseline Works According to the text alignment.
VI. Align-Content:
Align-Content is used for vertical alignment of double or more row/column.
This property can’t work on single row/column.

Values:
• Flex-End • Stretch
• Center • Flex-Start
• Space-Evenly • Space-Between
• Space-Around

VII. Align-Self:
Align-Self is used for vertical alignment of a single Flex-Item.
This property works on individual Flex-Item.

Values:
• Auto
“Auto” is new value for Align-Self. If
• Stretch
we put Auto then it will work
• Flex-Start according to his parent behavior.
• Flex-End
• Center
• Baseline

VIII. Order:
This property is used to set the order of the Flex-Item.
It will start from Lowest Value to Greater Value.
XI.Flex-Grow:
The Flex-Grow property specifies how much the item will grow relative to the
rest of the flexible items inside the same container.

Flex-Grow:1;

Three {Flex-Grow :2;}

Flex-Basis:
The Flex-Basis property specifies the initial length of a flexible item
The Flex-Basis works like max-width or max-height.
For Example:
One {flex-basis: 200px;}, Two {sflex-basis : 150px;} etc.

Flex-Shrink:
The Flex-Shrink Property is Used for responsive Flex-Items. If we to decrease
the size of Flex-Item with the size of window.
For Example:
If the put “Flex-Shrink: 1;” then the Flex-Item will decrease with window size
decrease.
And if “Flex-Shrink: 0;” then the Flex-Item will Fixed and can’t decrease will the
size of window.

You might also like