Flexbox Properties Tutorial and How to Use with HTML CSS

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

CSS

.container{ display: flex; }

Result

Flexbox Container

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

CSS

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

Result

Flexbox Container

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

CSS

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

Result

Flexbox Reverse

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

CSS

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

Result

Flexbox Column

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

CSS

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

Result

Flexbox Column Reverse

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item”>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item i3″>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item i3″>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

CSS

.item{ flex-grow: 1; }

Output

Flex Glow

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

HTML

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item i3″>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

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

<div class=”container”>
<div class=”item”>1</div>
<div class=”item i2″>2</div>
<div class=”item i3″>3</div>
<div class=”item i4″>4</div>
<div class=”item”>5</div>
</div>

CSS

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

Output </4h>

Leave a Reply

Your email address will not be published. Required fields are marked *