CSS Flexbox in 5 Minutes
Tags: css, webdev, codenewbie, beginners
Published: 2021-05-23 19:51:26

### What is CSS Flexbox

CSS Flexbox is a one-dimensional layout module that can be used to make your applications more responsive. 

Flexbox allows you to dynamically control alignment, direction, and space of content inside any container. 


### Lets get started using Flexbox


##### Fork this code
[Starter Code](https://codepen.io/terrythreatt/pen/NWppBxx)


##### Display

flexbox requires a parent container to control the layout of all children. 

lets use the *display* property
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
}
```

![Flexbox display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri7vfysl96qlfz35tw74.png)


##### Flex-direction

flex-direction establishes a main axis direction for flex items and can be in a row or column.  

flex-direction is in row direction by default so lets try a column layout direction 
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: column; 
}
```

![flex-direction column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e989e6hfx1sqsnctpi7u.png)

now lets get back to row direction 
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */ 
}
```

![flex-direction row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri7vfysl96qlfz35tw74.png)



##### Justify-content

justify-content will distribute space along the main axis of container for all the content.  

justify-content is in flex-start by default

lets try flex-end
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: flex-end;
}
```

![justify-content flex-end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfiuudwzabfremd0917h.png)

now lets try to add space-around
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}
```

![justify-content space-around](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/145t8acgey0p1oy5roex.png)


##### Responsive Design

flexbox has a major benefit of making it very easy to create responsive layouts for most devices.  

lets make this layout responsive with flex-direction and a css media query. 
```css
.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}

/* Lets make this mobile-friendly and easy to view for screens below 767px */
@media (max-width: 767px) {
  .flex-container {
    flex-direction: column;
  }
}
```

### Make It Your Own

[Final Code](https://codepen.io/terrythreatt/pen/eYvvqJP)

Read more in detail here about [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

This has been a 5 minute tutorial on how to use CSS Flexbox.

### Let's chat about Flexbox
We went through a quick tutorial on how to implement CSS Flexbox web accessibility and how you can make your web projects more responsive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with flexbox.

Happy Coding,
Terry Threatt