# CSS: Flex-box property

# What is flex-box?

=> It makes, easier to design a flexible responsive layout without using positioning and float property.

=>  Flexbox is one dimensional method.

=> It has powerful alignment capabilities.

### The basic concept of flexbox:

There are two types of axes of flexbox

1. Main axis
2. Cross axis

Flexbox: To start using the flexbox property, first you need to define a flex container.

flex-container {
       display: flex;
}

![E2zQtgjX0AY2AD1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627314961317/xCthFgDLy.png)

### The flex container properties are 

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

### Different  flexbox properties

{
      
    display: flex;
    flex-direction: row;

}

![E2zQtgjX0AY2AD1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627315602321/wcmaYiMWP.png)

{
      
    display: flex;
    flex-direction: column;

}


![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627315674038/Xzwm2J2bX.png)

{
      
    display: flex;
    flex-direction: row-reverse;

}


![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627315739835/W9Jmc6H1t.png)

{
      
    display: flex;
    flex-direction: column-reverse;

}


![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627315798802/oLL5toIHl.png)

### Justify-content property is used to align the flex items

{
   display: flex;
   justify-content: center;

}

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627315971515/H62eGm9Z0.png)

{
   display: flex;
   justify-content: space-between;

}

![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627316017726/vOpp-crfY.png)


{

   display: flex;
   justify-content: space-evenly;


}

![7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627316072270/zO4nqfzfb.png)

{

  display: flex;
  justify-content: flex-start;

}


![8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627316339586/sP6aygCx1.png)

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


![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627316421005/-0ZRlD6EJ.png)

I'll cover the rest of the properties in the next article.