Scribd
Upload
209 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
Available Formats
Download as PDF, TXT or read online on Scribd
209 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
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