CSS Flex Box: Output

 

CSS Flexbox: Properties & Values

Video Link 

A. Parent Properties

1. display:
   • flex;
2. flex-direction:
   • column;
   • column-revers;
   • row;
   • row-reverse;
3. justify-content:
   • flex-start;
   • flex-end;
   • center;
   • space-between;
   • space-around;
   • space-evenly;
4. align-items:
   • flex-start;
   • flex-end;
   • center;
   • baseline;
   • stretch;
5. flex-wrap:
   • nowrap;
   • wrap;
   • wrap-reverse;
6. align-content:
   • flex-start;
   • flex-end;
   • center;
   • space-between;
   • space-around;
   • stretch;

Code Output: A.1.a. Direction: Flex; Code Output: A.2.a.flex-direction: row;

B. Child Properties

1. flex:
   • 1;
2. flex-grow:
   • 1;
   • 2;
   • 3;
3. flex-shrink:
   • 0;
   • 1;
4. flex-basis:
   • 300px;
5. order:
   • 1;
   • 2;
   • 3;
6. align-self:
   • auto;
   • flex-start;
   • flex-end;
   • center;
   • baseline;
   • stretch;

Code Output: 

display: flex;

A.1.a.  display: flex;

1. display:
   • flex;

Primary Code Output: 

code output

1

2

3

4

After Applying the 

Properties: values;

Code Output:

code output

1

2

3

4

Code Output: 

flex-direction: column;

A.2.a.  flex-direction: column;(defolt)

1. ❌
2. flex-direction:
   • column;

Code Output: 

code output

1

2

3

4

Dfg

Code Output: 

flex-direction: column-reverse;

A.2.b.  flex-direction: column-reverse;

1. display: flex;
2. flex-direction:
   • ❌
   • column-reverse;

Code Output:

code output

1

2

3

4

Fr

Code Output: 

flex-direction: row; (defolt)

A.2.c.  flex-direction: row;

1. display: flex;
2. flex-direction:
   • ❌
   • ❌
   • row;

Code Output:

code output

1

2

3

4

Fr

Code Output: 

flex-direction: row-reverse;

A.2.d.  flex-direction: row-reverse;

1. display: flex;
2. flex-direction:
   • ❌
   • ❌
   • ❌
   • row-reverse;

Code Output:

code output

1

2

3

4

Fr

Code Output: 

justify-cintaint: flex-start;

A.3.a.  flex-direction: flex-start;

1. display: flex;
2. 
   
3. justify-containt:
   • flex-start;

Code Output: (default)

code output

1

2

3

4

Fr

Code Output: 

justify-cintent: flex-end;

A.3.b.  justify-cintent: flex-start;

1. display: flex;
2. 
   
3. justify-content:
   • 
     
   • flex-end;

Code Output: 

code output

1

2

3

4

Fr

Fr

Code Output:

justify-content: center;

A.3.c. justify-content: center;

1. display: flex;
3. justify-content:
   • 
     
   • 
     
   • center;

code output

1

2

3

4

Fr

Code Output:

justify-content: space-between;

A.3.d. justify-content:

space-between;

1. display: flex;
3. justify-content:
   • 
     
   • 
     
   • 
     
   • space-between;

code output-1

1

2

code output-2

1

2

3

code output-3

1

2

3

4

Fr

Code Output:

justify-content: space-around;

A.3.e. justify-content:

space-around;

1. display: flex;
3. justify-content:
   • space-around;

Code Output:

code output-1

1

2

code output-2

1

2

3

code output-3

1

2

3

4

Fr

Code Output:

justify-content: space-evenly;

A.3.f. justify-content:

space-evenly;

1. display: flex;
3. justify-content:
   • space-evenly;

Code Output:

code output-1

1

2

code output-2

1

2

3

code output-3

1

2

3

4

Fr

Code Output:

align-items: flex-start;

A.4.a. align-item: flex-start;

1. display: flex;
3. justify-content:
   • center;
4. align-items:
   • flex-start;

Code Output:

code output

1

2

3

Fr

Code Output:

align-items: flex-end;

A.4.b. align-item: flex-end;

1. display: flex;
3. justify-content:
   • center;
4. align-items:
   • 
     
   • flex-end;

Code Output:

code output

1

2

3

Fr

Code Output:

align-items: center;

A.4.c. align-item: center;

1. display: flex;
3. justify-content:
   • center;
4. align-items:
   • 
     
   • 
     
   • center;

Code Output:

code output

1

2

3

Fr

Code Output: 

Absolute Centering

align-items: baseline;

A.4.d. align-item: baseline;

1. display: flex;
3. justify-content:
   • center;
4. align-items:
   • 
     
   • 
     
   • Centre;

Code Output:

code output 

1

Fr

Code Output:

align-items: baseline;

A.4.e. align-item: baseline;

1. display: flex;
3. justify-content:
   • center;
4. align-items:
   • 
     
   • 
     
   • 
     
   • baseline;

Code Output:

code output❌

1

2

3

1

2

3

4

Code Output:

code output

1❌

2

3

4

Dghh

Dghh