Flexbox

In this article, We are going to discuss flex and some flex properties.

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

display: flex;

It is a property of Which used to make the parent container
flex.

/*On the flex container*/

.flexcontainer {
   display: flex;
}

Flex-direction

As flex is a one-dimensional method, We can control its direction. By default, flex is in the row direction.

flex-direction: row;

/*On the flex container*/

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

flex-direction: column;

/*On the flex container*/

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

flex-direction: column-reverse;

/*On the flex container*/

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

flex-direction: row-reverse;

/*On the flex container*/

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

Justify-content

Using justify-content we can decide where the content in flex should be. Mainly there are

justify-content:flex-start;

/*On the flex container*/

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

justify-content:flex-end;

/*On the flex container*/

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

justify-content:center;

/*On the flex container*/

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661492690016/1Mgluhs51.png align="left")

### justify-content:space-around;

/On the flex container/

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

justify-content:space-between;

/*On the flex container*/

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661493731711/LVHdjPqDV.png align="left")

##   Align-items

This property is used to align items vertically.

###  align-items:center;

/On the flex container/

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

Grow a flex item X times

flex:2;

We can use this property to grow selected flex as we need. Here the selected flex will grow 2x compared to others. This property is applied to the child of a flex parent.

/*On the flex child*/

.sub-box1{ flex:2; }

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661494726495/LZQ5xzAF2.png align="left")


##Wrap flex items 

We can wrap flex items by row or column as required using flex-wrap property.

### flex-wrap: wrap;

/On the flex container/

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

flex-wrap:nowrap;

/*On the flex container*/

.flexcontainer { display: flex; flex-direction: row; justify-content:center; align-items:center; flex-wrap:nowrap; } ```

Conclusion

In this article, We discussed the flex-properties. Hope you enjoyed reading.