Complete flexbox Guide
Tags: css, javascript, webdev, programming
Published: 2022-02-20 21:54:19

##flexbox
The Responsive website development with the help of flexbox is easy to use and implement. Flexbox is container which contain blocks inside the container with properties and main content.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk1exyouqrmrjptgolbh.png)

## flexbox Properties

**1.Display**
This defines a flex container  inline or block depending on the given value. It enables a flex context for all its direct children.
```ts
.container {
  display: flex; 
}
```
**2.flex-direction**
 flex direction define the direction for children the default value is row you can change with column, column-reverse and row-reverse.
```ts
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
```  
**3.flex-wrap**
flex-war use for responsive area its works for all type of devices. It contains four properties wrap ,no-wrap and wrap-revers.
```ts
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
**4.flex wrap**
flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
```ts 
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
**5.flex-flow**
This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. 

```ts
.container {
  flex-flow: column wrap;
}
```
**6.justify-content**
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size
```ts
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | 
}
```
**7.align-items**
This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis
```ts
.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end 
}
```
**8.align-content**
This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
```ts
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline 
}
```

This is not the end of flexbox properties and use but the main properties which are mostly used in web development are listed above with used. Start with flexbox its easy and important in web development field.

Hey everyone I am Ganesh from India web developer | content write connect with me on  [twitter](https://twitter.com/PatilGanesh1010) for content related to freelancing | web development and content writing.

Check out my recent articles 
- [100daysofprojects](https://dev.to/ganeshpatil386386/100daysofprojects-2abb)

- [How to used types.js](https://dev.to/ganeshpatil386386/how-to-use-typedjs-3d51)

- [Responsive navbar with HTML CSS ](https://dev.to/ganeshpatil386386/responsive-navbar-using-html-css-m79)