В момент написания заметки поддержка flexbox браузерами составляет 86,3% без использования префиксов и 97,7% с ними. Данная заметка – шпаргалка по префиксам для свойств flex-контейнера и flex-элементов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/********************************* префиксы для flex-контейнера *********************************/ .flex { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: inline-flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-flow: column wrap; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; justify-content: space-between; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; align-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-items: center -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; } /****************************** префиксы для flex-элементов ******************************/ .flex-item { flex-grow: 1; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-shrink: 3; -webkit-flex-shrink: 3; -ms-flex-negative: 3; flex-basis: 200px; -webkit-flex-basis: 200px; -ms-flex-preferred-size: 200px; flex: 1 3 200px; -webkit-box-flex: 1; -webkit-flex: 1 3 200px; -ms-flex: 1 3 200px; align-self: center; -webkit-align-self: center; -ms-flex-item-align: center; order: 3; -webkit-box-ordinal-group: 3; -webkit-order: 3; -ms-flex-order: 3; } |
Данный кусочек относительно использования префиксов взят из объемной статьи по flexbox’ам с другого источника.
Для flex нужно больше префиксов:
display: -webkit-flex;
display: -webkit-box;
display: -moz-flex;
display: -moz-box;
display: -ms-flexbox;
display: -ms-flex;
display: -o-flex;
display: flex;
Благодарю за дополнение.
Добрый день, спасибо за шпаргалку, но мне кажется все свойства без префиксов должны идти после свойств с префиксами. Как минимум это правильно, а как максимум не будет вызывать никаких проблем.
Наверное, как удобней. Я всегда пишу сначала без префикса. Мне читать CSS проще в таком порядке.
Это в корне неверно. Почитайте спецификации и как устроен разбор css в браузере.
Префиксы всегда впереди, без префиксов – всегда в конце.
Благодарю, ознакомлюсь.
Вот это 100%, что сначала все префиксы и в таком же порядке их выпуска в браузерах, а потом без префиксов.
И кроме префиксов, в старых версиях (разных производителей) браузеров, свойства для префиксов могут по разному называться. Но здесь это указано.
Два раза на этом обжегся.
А opera что ли flexbox поддерживает идеально?
Судя по caniuse – да (даже opera mini)
https://caniuse.com/#search=flexbox
Это пиздец. Всех кто наплодил это г-но нужно отстранять от браузеров до конца жизни
Вот ты скунс, лишь бы насрать.