57.8% of internet traffic in the united states comes from mobile devices.

Throw tablets into the mix - 3 out of 5 visitors to your website will not be viewing on a computer screen.

Even if a visitor is using a computer, laptops vary in size and desktop monitors can even be curved now.

Flexbox is a Web Developers best friend and it is fairly easy to learn. Here are the 5 most important Flexbox properties you need for a great responsive design.

justify-content: center;

There was a very dark time in Web Development where centering elements in the middle of the screen was quite difficult.

Devs would most of the time set the margin to auto, then use pseudo elements and floats to achieve the look they wanted. Now all you need to do is set up Flexbox on your container holding all elements and use the justify-content: center; property.

The HTML elements will magically center themselves on your screen or within your respective container.

flex-direction: column;

Flexbox's default behavior is to put all elements in a row.

To change that behavior, flex-direction: column; alters the default so that all elements stack on top of one another. This is especially useful when accounting for mobile screen sizes. When the screen size gets to the point where your Flexbox runs out of room, change it so the length extends vertically instead of horizontally.

Since the scroll on a mobile device is infinite, you will be able to keep elements aligned without horizontal spillover.

align-items: center;

This property basically works the same as justify-content, only it works in the opposite direction.

If you use this property when flex-direction is set to row, it centers the items vertically (ex. every item has 10px above and below). Using this property when flex-direction is column, it behaves exactly like justify-content, centering elements horizontally.

By using the right combination of flex-direction, align-items, and justify-content, you will be able to keep your design aligned on any screen size.

gap: {insert px, rem, em, %};

Now, we can center all of our items, great - but why are they all so close together?

They are close together because we told Flexbox to center everything. It doesn't account for any space in between items - it simply gives the exact amount of space the element needs.

By using the gap property, you can easily keep your elements spaced out, without that "squeezed together" look.

flex-wrap: wrap;

There is a slight problem with that whole justify-content situation - what happens when you want the items to stay within the current screen size and not spill over horizontally?

Flex-wrap fixes this issue with ease. You simply add this property and when Flexbox runs out of space and it will extend the height of your container by adding a row right below your first row. The best part is, all other flex properties like gap are still displayed and if you have justified your elements center, the wrap knows to center the elements on the newly created row.

By using the combination of these 5 Flexbox properties (and a few media queries) you can quickly put together a great responsive layout for any device.