Why Using Flexbox: An Overview of Behind using flexbox.

In this blog, show you using behind flexbox and main properties of using it in order to flexbox layout.

What is Flexbox?

Its is a new module in CSS3 that make easy to the alignment of web elements to one another, in different direction and orders for making responsive website layout.
The main idea behind using flexbox layout that gives container the abilities to expand and to shrink element to best use all the available space.
Flexbox is best replacement of float layouts with doing less code and more readable and logical code.
Its helpfull and completly change the way of one dimensional layouts.

Introduction of Flexbox: Flexbox Container

1 Display: flex Property

HTML

CSS

.container{ display: flex; }

Result

Flexbox Container

2. Display:flex; Flex Direction-direction:row;

HTML

CSS

.container{ display: flex; flex-direction: row;}

Result

Flexbox Container

3. Display:flex; flex-direction: row-reverse;

HTML

CSS

.container{ display: flex; flex-direction: row-reverse;}

Result

Flexbox Reverse

5. Display : flex; flex-direction: column;

HTML

CSS

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

Result

Flexbox Column

6. Display : flex; flex-direction: column-reverse;

HTML

CSS

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

Result

Flexbox Column Reverse

7. Display : flex; flex-direction: row; justify-content: center;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
}

Result

Flexbox Justify Content

8. Display : flex; flex-direction: row; justify-content: space-between;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: space-between;
}

Result

Flexbox Space Between

9. Display : flex; flex-direction: row; justify-content: space-around;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: space-around;
}

Result

Flexbox Justify Space Around

10. Display : flex; flex-direction: row; justify-content: space-evenly;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: space-evenly;
}

Result

Flexbox Space Evenly

11. Display : flex; flex-direction: row; justify-content: space-evenly;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: space-around;
}

Result

Flexbox Around

12. Display : flex; flex-direction: row; justify-content: flex-end;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: flex-end;
}

Result

Flexbox Flex End

13. Display : flex; flex-direction: row; justify-content: flex-start;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: flex-start;
}

Result

Flexbox Flex Start

14. Display : flex; flex-direction: row; justify-content: center; align-item: center;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.i2{ height: 200px;}

Result

Flexbox Align Item Center

15. Display : flex; flex-direction: row; justify-content: center; align-item: flex-start;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}

.i2{ height: 200px;}

Result

Flexbox AlignItem Flex Start

16. Display : flex; flex-direction: row; justify-content: center; align-item: flex-end;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}

.i2{ height: 200px;}

Result

Flexbox AlignItem Flex End

17. Display : flex; flex-direction: row; justify-content: center; align-item: flex-stretch;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
}

.i2{ height: 200px;}

Result

Flexbox Align Item Flex Stretch

18. Display : flex; flex-direction: row; justify-content: center; align-item: baseline;

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
}

.i2{ height: 200px;}

.i4{ font-size: 60px !important; }

Result

Flexbox AlignItem Baseline

Flex Box Items

19. Flex Item – Flex Start

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.i2{ height: 200px;}

.i4{ font-size: 60px !important; align-self: flex-start; }

Result

Flex Align Item Start

20. Align Item Flex End

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.i2{ height: 200px;}

.i4{ font-size: 60px !important; align-self: flex-end; }

Output

Align Item Flex End

21. Flex Item Order

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.i2{ height: 200px;}
.i4{ font-size: 60px !important; align-self: flex-end; order: -1; }

Result

Flex Item Order

22. Other Example of Flex item Order

HTML

CSS

.container{ display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.i2{ height: 200px;}

.i4{ font-size: 60px !important; align-self: flex-end; order: -1; }

.i3{ order: -2; }

Output

Flex Item Order Two

23. Flexbox flex item property flex-grow.

HTML

CSS

.item{ flex-grow: 1; }

Output

Flex Glow

24. Flexbox flex item property flex glow with other element within a div.

HTML

CSS

.item{ flex-grow: 1; }

.i3{ flex-grow:2}

Output

Flex box Flex Basic

24. Flexbox flex item property flex glow with other element within a div.

HTML

CSS

.item{ flex-grow: 1; }
.i3{ flex-grow:2}