You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.

With Flexbox you can use multiple properties, for example:

.flex-container {
  display: flex;
  align-items: center;
}

This will work in 99.14% of cases, according to Can I Use.

In some old browser versions it won't work like this. You need to add a so-called prefix to the properties to make them work.

Prefixes are like '-webkit-' for webkit-based browsers, like Safari or older versions of Chrome.

Or -moz- for Firefox.

Or -ms- for Internet Explorer.

Years ago, browsers used these prefixes to indicate these properties were for testing.

For example, in Chrome version 28 you as a developer could start playing around / testing flexbox properties by using e.g. -webkit-align-items: center.

These prefixes were added because maybe later, after experimenting, the standardization process would change the name of these properties. So with a prefix it would clearly indicate that it was for experimental purposes only.

Then in Chrome version 29 you could start using align-items: center, without prefix.

However, some people never upgraded their browser to version 29. So they are still on e.g. Chrome version 28.

Reasons could be corporate computers that have a stricter updating process that never got around to it. People who use (old) software that only works on older versions and don't want to update their browser version because they might look access to that software or would be forced to pay for the software.

So for that super small percentage of people who are on those older browser versions, we should still use prefixes, so that it works in their browsers too.

You probably don't want to do that manually, so there is open-source software that will do it for you automatically, like Autoprefixer. You can use that as an NPM-package.

That will upgrade the above example from 99.14% to 99.7% coverage.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram