CSS3 Flexbox

Siavash Sattari
Front-end Developer
Learn CSS3 Flexbox The Right Way
Section 1 :
Getting Started With Flexbox

Lecture 1.2 :
What is Flexbox ?
 1
What Is Flexbox ?

• Flexbox is a new layout module in CSS3 designed to help us create CSS layouts much easier.

• Flexbox layout model provides a more efficient way to layout , align and distribute space among
elements within our document - even when the viewport and the size of our elements is dynamic or
unknown .

• The main idea behind the flex layout is to give the container the ability to change it’s elements width ,
height and order to best fill the available free space .

• A flex container expands elements to fill available free space or shrink them to prevent overflow .

• Flexbox is a one-dimensional layout model which controls the layout based on a row or on a column
but not together at the same time .

• Flexbox really makes it easier to create flexible responsive layouts without using float or positioning .

• Flexbox is the Future!

 2
Why Do We Need Flexbox
?

• Flexbox is the tool that let’s us forgot about using :

• Table layouts
• Floats
• Clearfix hacks
• Positioning

• With new CSS3 Flexbox model , we can now write more less and maintainable code for various common
layout tasks such as :

• Vertical centering
• Equal height columns
• Take up the whole space
• Simpler grids
 3
Flexbox consists of two main components
:

• Flex Container : The parent element in which Flex items are contained .

• Flex Items : The direct child elements within a Flex container .

Flex Items

Flex container

1 2 3 4
 4
Flexbox is a set of properties :

Flex Container Flex Item Properties

Properties

1. flex-direction 1. order

2. flex-wrap 2. align-self

3. flex-flow 3. flex-grow

4. justify-content 4. flex-shrink

5. align-items 5. flex-basis

6. align-content 6. flex
 5
Main-axis & Cross-axis :
Cross-axis

Main-axis

1 2 3 4
Section 1 :
Getting Started With Flexbox

Lecture 2.2 :
Browser Support For Flexbox
 1
Browser Support For Flexbox :

CSS Flexbox is supported in all the modern browsers

Section 2 :
Working On Flex Container

Lecture 1.10 :
Introduction
 1
Working on Flex Container :

• display - display : flex ; vs display : inline-flex

• main-axis and Cross-axis

• flex-direction

• flex-wrap

• The shorthand ‘flex-flow’ property

• justify-content

• align-items

• align-content

• Flex container properties overview

Section 2 :
Working On Flex Container

Lecture 2.10 :
display : flex VS display : inline-flex
 1
Creating a Flex Container :

• Flexbox layout activated by declaring the display property :

• display : flex ; - The element becomes a block-level flex container .

• display : inline-flex ; - The element becomes an inline-level flex container .

 2
display : flex

display : flex ;

1 2 3 4 Flex Container #1

display : flex ;

1 2 3 4 Flex Container #2

Note : Both flex containers take 100% width of screen .

 3
display : inline-flex

display : inline-flex ; display : inline-flex ;

1 2 3 4 1 2 3 4

Flex Container #1 Flex Container #2

Note : Inline flex containers do not take 100% width of screen .

Section 2 :
Working On Flex Container

Lecture 3.10 :
Main-Axis & Cross-Axis
 1
The Two Axis Of Flexbox :

• 1. Main-axis : This is the primary axis along which flex items are laid out . This will change depending
upon the value of flex-direction property .

• 2. Cross-axis : This is the axis that is perpendicular to the main axis . The direction depends on the main
axis direction .
 2
Main-axis & Cross-axis :
Cross-axis

Main-axis

1 2 3 4

By default , Flex items laid out horizontally .

 Main-axis
3
Main-axis & Cross-axis :

1
Cross-axis
2

Flex items laid out vertically .

 4
Main-axis & Cross-axis :
Cross-axis

Main-start Main-end

Cross-start

Main-axis
1 2 3 4
Cross-end

Flex items laid out horizontally .

 5
Main-axis & Cross-axis :
Main Main

Cross Cross

( Left to Right , Top to Bottom ) ( Right to Left , Top to Bottom )

Cross Cross

Main Main

( Top to Bottom , Left to Right ) ( Bottom to Top , Left to Right )

Section 2 :
Working On Flex Container

Lecture 4.10 :
flex-direction Property
 1
What Is flex-direction ?

• The flex-direction allows to set the direction that how flex items are placed within flex container .

• It establishes the main-axis which determines the direction that flex items are laid out in .
 2
flex-direction :

• The flex-direction property sets direction for flex items within flex container . It accepts 4 values :

• row - (Default) : Main-axis runs from left to right .

• column - Main-axis runs from top to bottom .
• row-reverse – Main-axis runs from right to left .
• column-reverse – Main-axis runs from bottom to top .

• Syntax for flex-direction property :

flex-direction : row | row-reverse | column | column-reverse ;

 3
flex-direction : row ;

main-start

1 2 3 4

Main-axis runs from left to right

 4
flex-direction : row-reverse ;

main-start

4 4 2 1

Main-axis runs from right to left

 5
flex-direction : column ;
main-start

Main-axis runs from top to bottom

 6
flex-direction : column-reverse ;

1
main-start

Main-axis runs from bottom to top

 7
Main-axis & Cross-axis :

Normal

Main Cross

Cross Main

Flex-direction : row Flex-direction : column

( Left to Right , Top to Bottom ) ( Top to Bottom , Left to Right )

 8
Main-axis & Cross-axis :

Reverse

Main Cross

Main
Cross

Flex-direction : row-reverse Flex-direction : column-reverse

( Right to Left , Top to Bottom ) ( Bottom to Top , Left to Right )

Section 2 :
Working On Flex Container

Lecture 5.10 :
flex-wrap Property
 1
What Is flex-wrap ?

• The flex-wrap defines whether the flex container is single-line or multi-line , and it also defines the
direction of the cross-axis , which determines the direction new lines are stacked in .
 2
flex-wrap :

• The flex-wrap property specifies whether the flex items should wrap or not . It accepts 3 values :

• nowrap - This is the default . The flex container creates only one row or column .

• wrap - The flex container is multi-line & Flex items will wrap onto multiple lines .

• wrap-reverse - Same as wrap ; but in opposite direction .

• Syntax for flex flex-wrap property :

flex-wrap : nowrap | wrap | wrap-reverse ;

 3
flex-wrap : nowrap ;

1 2 3 4 5 6

No-wrap may cause flex container to overflow , breaking the layout

 4
flex-wrap : wrap ;

1 2 3 4

5 6

Flex items wrapped on the new next line / row along the cross axis
 5
flex-wrap : wrap ;

1 5

2 6

Flex items wrapped on the new next line / column along the cross axis
 6
flex-wrap : wrap-reverse ;

5 6

1 2 3 4

Flex items wrapped on the new next line / row but in the reverse / opposite direction of the the cross axis
Section 2 :
Working On Flex Container

Lecture 6.10 :
The Shorthand ‘ flex-flow ‘ Property
 1
The shorthand ‘ flex-flow ’ Property :

• The flex-flow property is a shorthand for flex-direction and flex-wrap , in allows us to specify both of
them using just one property name :

• row nowrap – This is the default .

• Syntax for flex-flow property :

flex-flow : row nowrap [ flex-direction flex-wrap ]

 2
The shorthand ‘ flex-flow ’ Property :

flex-wrap

flex-flow : row nowrap ;

flex-direction
Section 2 :
Working On Flex Container

Lecture 7.10 :
Justify-content Property
 1
What Is justify-content ?

• The justify-content Property aligns the flex items along the main-axis , the direction in which flex-
direction has set the flow .

• Typically it helps to distribute extra free space leftover between and around the flex items along the
main-axis of a flex container .
 2
justify-content :

• The justify-content property is used to align the flex items along the main-axis . It accepts 6 values :

• flex-start - Aligns the flex items at the start of the flex container . This is default .
• flex-end - Aligns the Flex items at the end of the flex container .
• center - Aligns the flex items in the middle of the flex container .
• space-between - Aligns the flex items with equal spacing between them .
• space-around - Aligns the flex items with equal spacing around them .
• space-evenly - Aligns the flex items with equal spacing between any two flex items.

• Syntax for justify-content property :

justify-content : flex-start | flex-end | center | space-between | … ;

 3
Main-axis & Cross-axis :
Cross-axis

main start main end

Cross start

Main-axis
1 2 3 4
Cross end

Flex items laid out horizontally .

 4
Main-axis :

main start main end

Row

Main-axis
1 2 3 4

Note : justify-content positions flex-items along the Main-axis

 5
justify-content : flex-start ;

Main-start

1 2 3 4

All flex items are placed at the start of main-axis . This is default
 6
justify-content : flex-end ;

Main-end

4 3 2 1

All flex items are placed at the end of main-axis

 7
justify-content : center ;

Main-center

1 2 3 4

All flex items are placed at the center of main-axis

 8
justify-content : space-between ;

Main-start Main-end

Space-between Space-between Space-between

1 2 3 4

Flex items are evenly distributed along the main-axis , first item is on
the main-start and last item is on the main-end
 9
justify-content : space-between ;

First item on main-start Last item on main-end

1 2 3 4

X X X

Same spacing between flex-items

 10
justify-content : space-around ;

Space around Space around Space around Space around

1 2 3 4

Flex items are evenly distributed along the main-axis

with equal space around them
 11
justify-content : space-around ;

1 2 3 4

X X X X X X X X

2X 2X 2X

Same spacing around flex-items

 12
justify-content : space-evenly ;

Even space Even space Even space Even space Even space

1 2 3 4

Flex items are distributed so that the spacing between any two flex
items is equal . And also the space to the edges is equal too
 13
justify-content : space-evenly ;

Equal space on left edge Equal space on right edge

1 2 3 4

X X X X X

Same spacing between flex-items , And also the space to the

edges is equal too
 14
justify-content ‒ row :

flex-start center

1 2 3 1 2 3

flex-end space-between

1 2 3 1 2 3

space-around space-evenly

1 2 3 1 2 3
 15
justify-content ‒ column :

flex-start center flex-end space-between space-around space-evenly

1 1
2 1
1
3 1
2 2 2 2
3
1
2 3
3
3 3
Section 2 :
Working On Flex Container

Lecture 8.10 :
align-items Property
 1
What Is align-items ?

• The align-items allows to align flex items along the cross-axis on the current row/column .
 2
align-items Properties :

• The align-items property is used to align the flex items along the cross-axis . It accepts 5 values :

• stretch - Stretches the flex items to fill the flex container . This is default .
• flex-start - Aligns the flex items at the top of the flex container .
• center - Aligns the flex items in the middle of the flex container .
• flex-end - Aligns the flex items at the bottom of the flex container .
• baseline - Aligns the flex items along their baselines .

• Syntax for align-items property :

align-items : stretch | flex-start | center | flex-end | baseline ;

 3
Main-axis & Cross-axis :
Cross-axis

main start main end

Cross start

Main-axis
1 2 3 4
Cross end

Flex items laid out horizontally .

 4
Cross-axis :
Cross-axis

Cross start

1 2 3 4
Cross end

Note : align-items positions flex-items along the Cross-axis

 5
align-items : stretch ;

Cross start

1 2 3 4 Height

Cross end

All flex items stretch along the cross-axis to fill the flex container . This is default .
 6
align-items : flex-start ;

Cross start

1 2 3 4

Height

All flex items are placed at the start of the cross-axis .

 7
align-items : center ;

Cross middle
1 2 3 4 Height

All flex items are placed in the middle of the cross-axis .

 8
align-items : flex-end ;

Height

1 2 3 4
Cross end

All flex items are placed at the end of cross-axis .

 9
align-items : baseline ;

Cross start

1 2 3 4 baseline
Height

Cross end

All flex items are aligned in such a way that the baseline are equal .
 10
align-items ‒ row :

flex-start center flex-end strech baseline

1 2 3 11 2 css
2 1 2 3 1 2 3 2
3 1 2 3 3
 11
align-items ‒ column :

flex-start center flex-end strech

1 1 1 1
2 2 2 2
3 3 3 3
Section 2 :
Working On Flex Container

Lecture 9.10 :
align-content Property
 1
What Is align-content ?

• The align-content aligns flex lines within the flex container when there is an extra space along the
cross-axis .

• It has no effect on single line flex containers .

 2
Flex lines :

• Flex items in a flex container are laid out and aligned within flex lines . A flex container can be either
single-line or multi-line depending on the flex-wrap property .

• A single-line flex container lays out all of its flex items in a single line , even if that would cause
its contents to overflow .

• A multi-line flex container breaks its flex items across multiple lines . When additional lines are
created , they are stacked in the flex container along the cross-axis according to the flex-wrap
property .
 3
flex-wrap : wrap ;

Flex Line #1 1 2 3 4

Flex Line #2 5 6

Flex items wrapped on the new next line / row along the cross-axis
 4
flex-wrap : wrap ;

Flex Line #1 Flex Line #2

1 5

2 6

Flex items wrapped on the new next line / column along the cross-axis
 5
align-content :

• The align-content property is used to align the flex lines along the cross-axis . It accepts 6 values :

• stretch - Stretches the flex lines to take up the remaining space . This is default.
• flex-start - Displays the flex lines at the start of the flex container .
• center - Displays the flex lines in the middle of the flex container .
• flex-end - Displays the flex lines at the end of the container .
• Space-between - Displays the flex lines with equal space between them .
• Space-around - Displays the flex lines with equal space around each line .

• Syntax for align-content property :

align-content : stretch | flex-start | center | flex-end | space-between | space-around ;

 6
align-content : stretch ;

Cross-start

1 2 3 4 5 6 7 8 9 10 11
Height

12 13 14 15

Cross-end

All flex lines stretch to take up the remaining space in flex container . This is default.
 7
align-content : flex-start ;

Cross-start

1 2 3 4 5 6 7 8 9 10 11

12 13 14 15
Height

Cross-end

All flex lines are placed at the start of the flex container .
 8
align-content : center ;

Cross-start

1 2 3 4 5 6 7 8 9 10 11
Height

12 13 14 15

Cross-end

All flex lines are placed in the middle of the flex container .
 9
align-content : flex-end ;

Cross-start

Height

1 2 3 4 5 6 7 8 9 10 11

12 13 14 15
Cross-end

All flex lines are placed at the end of the flex container .
 10
align-content : space-between ;

Cross-start

1 2 3 4 5 6 7 8 9 10 11

Equal space between flex items

12 13 14 15
Cross-end

Flex lines are evenly distributed the first line is at the start of the flex
container while the last one is at the end
 11
align-content : space-around ;

Cross-start
X

1 2 3 4 5 6 7 8 9 10 11
X
Height
X

12 13 14 15
X
Cross-end

Flex lines evenly distributed with equal space before and after each flex line
.
 12
align-content : space-around ;

Cross-start

1 2 3 4 5 6 7 8 9 10 11

Height

12 13 14 15

Cross-end

Flex lines evenly distributed with equal space around each line.
 flex-start center flex-end
13
align-content : 1 2 3
4 5 1 2 3
1 2 3
6 4 5
4 5
6
6
space-around Space-between stretch

1 2 3 1 2 3 1 2 3

4 5 4 5 4 5

6 6
6
Section 2 :
Working On Flex Container

Lecture 10.10 :
Flex Container Properties Overview
 1
Flex Container Properties Overview :

1. flex-direction : row | row-reverse | column | column-reverse

2. flex-wrap : nowrap | wrap | wrap-reverse

3. flex-flow : row nowrap [ flex-direction flex-wrap ]

4. justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly

5. Align-items : stretch | flex-start | flex-end | center | baseline

6. align-content
Section 3 :
Working On Flex Items

Lecture 1.8 :
Introduction
 1
Working on Flex Items :

• order

• align-self

• flex-grow

• flex-shrink

• flex-basis

• The Shorthand ‘flex’ Property

• Flex Item properties overview

Section 3 :
Working On Flex Items

Lecture 2.8 :
order Property
 1
What Is order ?

The flexbox ordering controls the order in which flex items of a flex container appear inside the flex
container . By default they are ordered as initially added in the flex container .
 2
order Property :

• The order property specifies the order of a flex item relative to the rest of flexible items inside the same
flex container . It accepts positive or negative integer as a value .

• 0 - This is default .

• <integer> - A positive or negative integer value .

• Syntax for order property :

order : 0 | <integer> ;
 3
order :

main start main end

Row

Main-axis
1 2 3 4

Note : order positions flex-items along the Main-axis

 4
order :

Order : 0 ;

1 2 3 4

By default , flex items are laid out in the order in which they appear .
 5
order :

.item2 { order : 1 ; }

1 2 3 4 1 3 4 2

order : 0 ; order : 0 ;
 6
order :

.item1 , .item3 { order : 1 ; }

1 2 3 4 2 4 1 3

order : 0 ; order : 0 ;
 7
order :

.item2 { order : -1 ; }

1 2 3 4 2 1 3 4

order : 0 ; order : 0 ;
 8
order :

1 2 3 4

order : 0 ; order : 0 ; order : 0 ; order : 0 ;

1 3 4 2

order : 0 ; order : 0 ; order : 0 ; order : 1 ;

2 1 3 4

order : -1 ; order : 0 ; order : 0 ; order : 0 ;

Section 3 :
Working On Flex Items

Lecture 3.8 :
align-self Property
 1
What Is align-self ?

• The align-self defines the alignment of individual flex item along the cross-axis .
 2
align-self :

• The align-self property specifies the alignment for the selected flex item inside the flex container . It
accepts 6 values:

• auto - Selected flex item inherits it’s flex container's align-items property . This is default .
• stretch - Stretches the selected flex item to fill the flex container .
• flex-start - Aligns the selected flex item at the top of the flex container .
• center - Aligns the selected flex item in the middle of the flex container .
• flex-end - Aligns the selected flex item at the bottom of the flex container .
• baseline - Aligns the selected flex item at the baseline of the flex container .

• Syntax for align-self property :

align-self: auto | stretch | flex-start | center | flex-end | baseline ;

 3
Cross-axis :
Cross-axis

Cross-start

1 2 3 4
Cross-end

Note : align-self aligns the selected flex-item along the Cross-axis

 4
align-self : auto ;

align-items : stretch ;

1 2 3 4 Height

By default , all flex items inherit their flex container’s

align-items property so therefore stretched .
 5
align-self : stretch ;

.item2 { align-self : stretch ; }

align-items : flex-start ;

1 3 4

2 Height

The selected flex item is stretched to fill the flex container .

 6
align-self : flex-start ;

.item2 { align-self : flex-start ; }

align-items : flex-end ;

Height

1 3 4

The selected flex item is positioned at the top of the flex container .
 7
align-self : center ;

.item2 { align-self : center ; }

align-items : flex-start ;

1 3 4

2 Height

The selected flex item is positioned in middle of the flex container .

 8
align-self : baseline ;

.item2 { align-self : baseline ; }

align-items : center ;

2 Container Baseline

1 3 4 Height

The selected flex item is positioned at the baseline of the flex container .
Section 3 :
Working On Flex Items

Lecture 4.8 :
flex-grow Property
 1
The Superpower of Flex Items ;

• 1. flex-grow : Decides how much a flex item should grow , if there is extra space .

• 2. flex-shrink : Decides how much a flex item should shrink , if there is no extra space .

• 3. flex-basis : Defines the initial main-size of a flex item .

 2
order :

main start main end

Row

Main-axis
1 2 3 4

Note : flex-grow , flex-shrink & flex-basis , all three act along the Main-axis
 3
What is flex-grow ? ;

• The flex-grow defines how much a flex item should grow relative to other flex items if there is an extra
space available .
 4
flex-grow :

• The flex-grow property specifies how much a flex item can grow relative to the other flex items . It
accepts a unitless positive number as a value . Negative numbers are invalid .

• 0 - This is default .

• <number> - Any unitless positive number.

• Syntax for flex-grow property :

flex-grow : 0 | <number> ;
 5
flex-grow :

flex-grow : 0 ;

Extra Space

1 2 3

By default , flex items are with flex-grow set to zero , which means , they take only as
much space as it is necessary to display their content .
 6
flex-grow :

.item3 { flex-grow : 1 ; }

Extra Space

1 2 3

The flex-grow allows us to increase the width of flex-item , so it nicely expand &
take all the available extra space of it’s flex container .
 7
flex-grow :

.item { flex-grow : 1 ; }

Extra Space

1 2 3

If all flex-items have same grow factor , we get flex-items that grow
equally and fill up the entire flex container .
 8
flex-grow :
.item1 { flex-grow : 0 ; }

.item3 { flex-grow : 1 ; }

.item2 { flex-grow : 2 ; }

Extra Space

1 2 3

If one of the flex-item has grow factor of 2 , that would mean , that flex-item will
take twice as much space as the ones that have grow factor set to 1 .
 9
flex-grow Calculation :

flex grow
new width = ∗ free space + width
total flx grow

100 100 100 400

Width :
Free Space

flex−grow : 1 0 3

𝟏 𝟎 𝟑
CalculaFon : ∗ 𝟒𝟎𝟎 + 𝟏𝟎𝟎 ∗ 𝟒𝟎𝟎 + 𝟏𝟎𝟎 ∗ 𝟒𝟎𝟎 + 𝟏𝟎𝟎
𝟒 𝟒 𝟒

200 100 400

New Width :
Section 3 :
Working On Flex Items

Lecture 5.8 :
flex-shrink Property
 1
What is flex-shrink ? ;

• The flex-shrink defines how much a flex item should shrink relative to other flex items if there is not
enough space available.

• The flex-shrink is only important if the flex container has the nowrap setting , so that all of the flex items
sit next to each other in a single row .
 2
flex-shrink Property :

• The flex-shrink property specifies how much a flex item can shrink relative to the other flex items . It
accepts a unitless positive number as a value . Negative numbers are invalid .

• 1 - This is default .

• <number> - Any unitless positive number.

• Syntax for flex-shrink property :

flex-shrink : 1 | <number> ;
 3
flex-shrink :

main start main end

Row

Main-axis
1 2 3 4

Note : flex-shrink acts along the Main-axis

 4
flex-shrink :

flex-shrink : 1 ;

1 2 3 4

flex-wrap : nowrap
 5
flex-shrink :

flex-shrink : 1 ;

1 2 3 4

flex-wrap : nowrap

By default , all flex items have flex-shrink set to 1 , which means , they are allowed
to shrink equally if there is not enough space to accommodate .
 6
flex-shrink :

flex-shrink : 0 ;

1 2 3 4

flex-wrap : nowrap
 7
flex-shrink :

flex-shrink : 0 ;

1 2 3 4

flex-wrap : nowrap

If all flex items have flex-shrink set to zero ( don’t shrink ) , they will simply
overflow their flex-container if there is not enough space .
 8
flex-shrink :

.item2 { flex-shrink : 2 ; }

1 2 3 4

flex-wrap : nowrap
 9
flex-shrink :

flex-shrink : 1 ;

1 2 3 4

flex-wrap : nowrap

Setting one flex-item with flex-shrink of 2 would mean that , that flex-item
will shrink 2 times more as compare to others .
Section 3 :
Working On Flex Items

Lecture 6.8 :
flex-basis Property
 1
What is flex-basis ? ;

• It specifies the initial main size of the flex-item , before any available space is distributed according to
the flex factors ( flex-grow & flex-shrink ) .
 2
flex-basis :

• The flex-basis property specifies the initial main size of the flex-item , before any available space is
distributed. It takes any CSS size .

• auto - This is default .

• <length> - Any CSS size - percentage | em | rem |pixel etc .

• Syntax for flex-basis property :

flex-shrink : auto | <length> ;

 3
flex-basis :

main start main end

Row

Main-axis
1 2 3 4

Note : flex-basis acts along the Main-axis

 4
flex-basis :

flex-basis : auto ;

Extra Space

1 2 3

By default , the flex-basis property is set to auto , which means , the flex-basis
falls back to the flex item’s width property .
 5
flex-basis :

flex-basis : 0 ;

1 2 3

If the flex-items have flex-basis property set to zero , that means , they will
take up only the necessary space to display their content .
 6
flex-basis :

flex-basis : auto ;

Extra Space

1 2 3

By default , the flex-basis property is set to auto , which means , the flex-basis
falls back to the flex item’s width property .
 7
flex-basis :

Extra Space

1 2 3
40% of flex container New Extra Space
 8
flex-basis :
.item3 { flex-grow : 1 ; }

.item2 { flex-basis : 40% ; }

Extra Space

1 2 3

40% of flex container New Extra Space

The flex-basis specifies the initial main size of a flex-item , before any free space is distributed
according to the flex factors . It takes any CSS size in % , rem , em , px , etc .
 9
flex-basis VS widths :

.child {
flex-basis: 500px;
width: 100px; 500px
}

.child {
flex-basis: 100px;
min-width: 500px; 100px
}

.child {
flex-basis: 100px;
max-width: 700px; 700px
}
Section 3 :
Working On Flex Items

Lecture 7.8 :
The Shorthand ‘flex’ Property
 2
flex Property :

• The flex property is a shorthand for the flex-grow , flex-shrink and flex-basis properties
.

• 0 1 auto - This is default .

• Syntax for flex property :

flex : 0 1 auto ;
 2
flex :

flex-shrink

flex : 0 1 auto ;

flex-grow flex-basis
Section 3 :
Working On Flex Items

Lecture 8.8 :
Flex Item Properties Overview
 1
Flex Item Properties Overview :

1. oredr : 0 | <integer>

2. align-self : auto | stretch | flex-start | flex-end | center | baseline

3. flex-grow : 0 | <integer>

4. flex-shrink : 1 | <integer>

5. flex-basis : auto | <length>

6. flex : 0 1 auto [ flex-grow flex-shrink flex-basis ]

 The End :)
Hope you enjoyed

Email : [email protected]