CSS3 Flexbox Tutorials and Examples

How to use Css Flexbox Examples and Tutorials
How to use Css Flexbox Examples and Tutorials
How to use Css Flexbox Examples and Tutorials

CSS3 Layout provides an easy method to arrange items within a container. Flexbox was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. 

  • No Floats
  • Responsive and Mobile Friendly
  • We can easily changed the items order without editing html
  • Positioning Child elements very easy

Flexbox Main Axis

The Flexbox main axis defined by .flex-direction class below we will see main axis of flexbox.

  • row
  • row-reverse
  • column
  • column-reverse

Floxbox Browser Support

Basic Flexbox

<style type="text/css">
 .flex-container {
  display: flex;
  background-color:rgba(255,51,0,1);
}
 
.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
 
</style>
<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>  
 </div>
1
2
3
4

Flexbox Direction (Column) Properties Example

<style type="text/css">
  .flex-container {
  display: flex;
  flex-direction: column;
  background-color:rgba(255,51,0,1);
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>

Flexbox Direction ( column-reverse ) Properties Example

CSS Flex Direction Reverse, reverse the item bottom to top.

<style type="text/css">
  .flex-container {
  display: flex;
  flex-direction: column-reverse;
  background-color:rgba(255,51,0,1);
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>

Flexbox Direction (row)

Flexbox Direction row move the items horizontally left to right.

<style type="text/css">
  .flex-container {
  display: flex;
  flex-direction:row;
  background-color:rgba(255,51,0,1);
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>

Leave a Reply

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