4

I'm trying to get familiar with CSS flexbox. There are lots of helpful resources. However, when I run into -webkit-box;, -moz-box;, -ms-flexbox; & -webkit-flex; , I'm not sure what these are or how to handle them.

If anyone can shed some light on this I would be grateful.

Thanks!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
wallwalker
  • 591
  • 7
  • 14
  • 27

3 Answers3

2

These are the vendor prefexes It will be more clear to you when you will understand the browser working functionality. Actually all the browser running on their specific engines. What ever the CSS syntax or functionality we are writing, These engines render their behaviour on the browser.

Webkit

is most popular browser engine which is used by chrome safari etc. So these vendor prefexes are used to tell the browser that which css properties we should use.

Tabish
  • 1,592
  • 16
  • 13
2

Prefixes -webkit, -moz, and -ms are used to provide compatibility with older versions of web-browsers. You can check if the flex option is supported in a certain browser here: https://caniuse.com/?search=flexbox

In the most up-to-date versions of the browsers you won't need these prefixes. But for full possible compatibility you will want to still use them.

Denis BISTEINOV
  • 21
  • 1
1

You can read all about the vendor prefixes here.

Summary from the link:

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.

Dekel
  • 60,707
  • 10
  • 101
  • 129
  • I guess my next question would be when does one use the vendor prefixes? Are the values the same for each CSS property as long as I am using the vendor prefix correctly? – wallwalker Sep 04 '16 at 18:53
  • If I wanted to perform `justify-content: flex-end;` would I need to do it for other vendor prefixes such as : `.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-justify-content: flex-end; -moz-box-justify-content: flex-end; -ms-flex-justify-content: flex-end; -webkit-flex-justify-content: flex-end; justify-content: flex-end; width: 400px; height: 250px; background-color: lightgrey; }` ? – wallwalker Sep 04 '16 at 19:15