CSS3 FlexBox Container Properties Tutorial with Example

The most Important CSS3 flexbox (flex box) container concept to learn tutorial with example

 

#Flexbox Properties

#Display Flex

Some text Strong Tag Span Tag
1
2
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}
	
Some text Strong Tag Span Tag
1
2
CSS
	
.parent {
    display: inline-flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}
	
	
HTML

Some text 
<strong>Strong Tag</strong> 
<span>Span Tag</span>

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
 </div>

 

#Flex Basis

1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: auto;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: 20%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: 50%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: 80%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: 100%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-basis: content;
    background: #8ed082;
}

	
HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
 </div>

 

#Flex Flow

1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row nowrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row wrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row wrap-reverse;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row-reverse nowrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row-reverse wrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: row-reverse wrap-reverse;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column nowrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column wrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column wrap-reverse;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column-reverse nowrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column-reverse wrap;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-flow: column-reverse wrap-reverse;
    height: 280px;
}

.child {
    width: 50%;
    height: 30%;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
	<div class="child">4</div>
    <div class="child">5</div>
 </div>

 

#Flex

1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex: 0 1 auto;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex: 0 0 auto;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex: none;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex: 0 1 50%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex: 1 0 50%;
    background: #8ed082;
}

	
1
2
3
CSS
	
.parent {
    display: flex;
}

.child {
    flex: 1;
    padding: 20px;
    border: 1px solid #8ed082;
}

	
HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
 </div>

 

#CSS Properties for The FlexBox Container

#Flex Direction

1
2
3
4
5
CSS
	
.parent {
    display: flex;
    flex-direction: row;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}
	
1
2
3
4
5
CSS
	
.parent {
    display: flex;
    flex-direction: row-reverse;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}
	
	
1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-direction: column;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
CSS

.parent {
    display: flex;
    flex-direction: column-reverse;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
 </div>

 

#Flex Wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: nowrap;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap-reverse;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
    <div class="child">14</div>
    <div class="child">15</div>
	<div class="child">16</div>
	<div class="child">17</div>
	<div class="child">18</div>
 </div>


<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
 </div>

 

#Justify Content

1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: flex-start;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}


1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: flex-end;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: center;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: space-between;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: space-around;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
CSS

.parent {
   display: flex;
   justify-content: space-evenly;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
 </div>

 

#Align Content

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-end;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: space-around;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-content: stretch;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
 </div>

 

#Align Items

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS

.parent {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
 </div>

 

#CSS Properties for The FlexBox Items

#Align Self

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: auto;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: flex-start;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: flex-end;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: center;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: baseline;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: stretch;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: initial;
    background: #8ed082;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.secondChild {
    align-self: inherit;
    background: #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child secondChild">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
 </div>

 

#Flex Grow

flex-grow:
1
2
3
CSS

.parent {
   display: flex;
   flex-grow: 0;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
CSS

.parent {
   display: flex;
   flex-grow: 1;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
CSS

.parent {
   display: flex;
   flex-grow: 1;
}

.child:nth-child(1) {
   flex-grow: 2;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

1
2
3
CSS

.parent {
   display: flex;
   flex-grow: 1;
}

.child:nth-child(1) {
   flex-grow: 3;
}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
 </div>

 

#Flex Shrink

flex-shrink:
1
2
3
CSS

.parent {display: flex;}

.child {
    width: 80%;
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-shrink: 1;
    background: #8ed082;
}

1
2
3
CSS

.parent {display: flex;}

.child {
    width: 80%;
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(2) {
    flex-shrink: 0;
    background: #8ed082;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
 </div>

 

#Order

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    order: 0;
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(3) {
    order: -1;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    order: 0;
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(3) {
    order: 0;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    order: 0;
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(3) {
    order: 1;
}

1
2
3
4
5
CSS

.parent {display: flex;}

.child {
    padding: 20px;
    border: 1px solid #8ed082;
}

.child:nth-child(1) {order: 1;}
.child:nth-child(2) {order: 3;}
.child:nth-child(3) {order: 2;}
.child:nth-child(4) {order: 4;}
.child:nth-child(5) {order: 5;}


HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
 </div>