what is moz-flex webkit-flex in css?

Question

I got a code sample from internet. I use it and it works fine. But I dont understand the working of the code.

#header {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    background-color: #ffffff;
    border-bottom: solid 1px rgba(160, 160, 160, 0.3);
    height: 3.5em;
    left: 0;
    line-height: 3.5em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

What does moz-flex and webkit-flex stands for?

Thanks, Sabarisri

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Maria Ines Parnisari Dec 12 '15 at 05:47 — Maria Ines Parnisari, Dec 12 '15 at 05:47

score 5 · Answer 1 · edited May 23 '17 at 10:29

5

These are browser specific styles for webkit and mozilla browser engines as flex property is not a standard yet. A very nice and detailed explanation is done here.

Hope it helps!

edited May 23 '17 at 10:29

Community

1
1

answered Dec 12 '15 at 05:56

hkasera

2,118
3
23
32

1

To add to this, flexbox is standardized in all modern browsers except IE of course. IE 10 and 11 partially supports flexbox. So the only vendor prefix required for flexbox is `-ms-` for IE 10 only, oddly enough, IE 11 does not require a prefix despite it's partial support. See http://caniuse.com/#feat=flexbox – zer00ne Dec 12 '15 at 06:18

what is moz-flex webkit-flex in css?

1 Answers1

Linked