CSS CSS Flexbox Layout Flexbox Properties Vertical and Horizontal Centering

kevin hudson
kevin hudson
Pro Student 4,285 Points

Can I use and Flexbox support

Since there is a good amount of support for Flexbox across most browsers, but some like IE or Opera are lagging behind, Why would you use Flexbox if you know some browsers will not support it? For example currently, IE browser 9 and 10 do not support Flexbox so this means a very very large audience will be left out or disappointed in the website's design. To me, this seems like a big waste of time developing if you know people will not see an attractive well designed website.

Kyle Hartigan
Kyle Hartigan
16,139 Points

Hi Kevin,

Only about 5 percent of users on the internet are using browsers that do not support Flexbox (IE & Opera combined total). Five percent to me can be viewed to be significant or insignificant, as it depends on the audience for your website. Example: if you are a tech company, or something in the vein of targeting a younger demographic (50 and below), I believe using Flexbox would be okay because most of your audience is using modern browsers, and are capable of downloading a new browser if they are informed to do so.

I currently work in a media industry where a large portion of the demographic are above 55. Therefore, It's my opinion we ensure our sites are compatible with all browsers.

With some code on your website, you are able to perform browser detection to see if they are rendering the page properly, you can even suggest to your users to download Chrome or Firefox if they are lagging behind.

I do not think It's right to not advance a technology stack because people are unwilling to update their browsers. Flexbox offers a very large toolkit of CSS properties that traditional CSS does not have. Alignment and floats can be a nightmare as they completely through off the integrity of the document tree (DOM). I would highly recommend using Flexbox as It's a pertinent skill to have and will only continue to grow in use within the front end development industry.

Again, take into consideration your target audience. If you do use Flexbox, let the user know if they're having issues rendering the page, and offer a solution by giving them links to download a more modernized browser.

Side note: Having an analytics tool such as Google Analytics will give you insight into what your users are using as a browser. This may help influence your decision.

1 Answer

Kevin Gates
Kevin Gates
12,776 Points

What Kyle said, plus Microsoft has ended support for IE 9 and 10. So unless your target market is likely using outdated PCs and software (such as an AARP website), then likely you can move ahead and use Flexbox without issue and if needed add that additional disclaimer about needing to use a modern browser.

Sidenote: if more websites encouraged people to move to newer browsers, this would actually be a good thing as it would bring more security to the users and decrease the risk of fraudulent or malicious behavior against those users.