Фильтр по рубрикам

    Показать еще ... ()
    Главная / CSS / Кроссбраузерная поддержка Flex

    Кроссбраузерная поддержка Flex

    На 18.08.2020 поддержка браузерами свойства flexbox составляет более 90%. Цифра меняется в зависимости от используемых свойств. Но тем не менее для его корректного отображения в некоторых браузерах все еще нужны префиксы. И даже когда поддержка flexbox браузерами станет 100%, то, судя по тенденции отмирания старых браузеров, префиксы будут использоваться еще несколько лет после этого. Так что заметка пригодится.

    Статью условно разделю на 2 части:

     

    Полные префиксы

    Собраны на основе рекомендаций с сайта developer.mozilla.org. Полный фарш префиксов для всех flex-свойств. На мой вкус здесь их переизбыток, но зато будут работать со всеми старыми браузерами, которые хоть что-то знают о flex.

    Flexbox containers

    display: flex;

    Скопировано 
    display: -webkit-box;
    
display: -moz-box;
    
display: -webkit-flex;
    
display: -ms-flexbox;
    
display: flex;
    Показать код

    display: inline-flex;

    Скопировано 
    display: -webkit-inline-box;
    
display: -moz-inline-box;
    
display: -webkit-inline-flex;
    
display: -ms-inline-flexbox;
    
display: inline-flex;
    Показать код

    Flexbox justify content

    justify-content: space-between;

    Скопировано 
    -webkit-box-pack: justify;
    
-moz-box-pack: justify;
    
-ms-flex-pack: justify;
    
-webkit-justify-content: space-between;
    
justify-content: space-between;
    Показать код

    justify-content: center;

    Скопировано 
    -webkit-box-pack: center;
    
-moz-box-pack: center;
    
-ms-flex-pack: center;
    
-webkit-justify-content: center;
    
justify-content: center;
    Показать код

    justify-content: flex-start;

    Скопировано 
    -webkit-box-pack: start;
    
-moz-box-pack: start;
    
-ms-flex-pack: start;
    
-webkit-justify-content: flex-start;
    
justify-content: flex-start;
    Показать код

    justify-content: flex-end;

    Скопировано 
    -webkit-box-pack: end;
    
-moz-box-pack: end;
    
-ms-flex-pack: end;
    
-webkit-justify-content: flex-end;
    
justify-content: flex-end;
    Показать код

    justify-content: space-around;

    Скопировано 
    ms-flex-pack: distribute;
    
-webkit-justify-content: space-around;
    
justify-content: space-around;
    Показать код

    Flexbox align items

    align-items: center;

    Скопировано 
    -webkit-box-align: center;
    
-moz-box-align: center;
    
-ms-flex-align: center;
    
-webkit-align-items: center;
    
align-items: center;
    Показать код

    align-items: flex-start;

    Скопировано 
    -webkit-box-align: start;
    
-moz-box-align: start;
    
-ms-flex-align: start;
    
-webkit-align-items: ;
    
align-items: flex-start;
    Показать код

    align-items: flex-end;

    Скопировано 
    -webkit-box-align: end;
    
-moz-box-align: end;
    
-ms-flex-align: end;
    
-webkit-align-items: flex-end;
    
align-items: flex-end;
    Показать код

    align-items: baseline;

    Скопировано 
    -webkit-box-align: baseline;
    
-moz-box-align: baseline;
    
-ms-flex-align: baseline;
    
-webkit-align-items: baseline;
    
align-items: baseline;
    Показать код

    align-items: stretch;

    Скопировано 
    -webkit-box-align: stretch;
    
-moz-box-align: stretch;
    
-ms-flex-align: stretch;
    
-webkit-align-items: stretch;
    
align-items: stretch;
    Показать код

    Flexbox direction

    flex-direction: column;

    Скопировано 
    -webkit-box-direction: normal;
    
-webkit-box-orient: vertical;
    
-moz-box-direction: normal;
    
-moz-box-orient: vertical;
    
-webkit-flex-direction: ;
    
-ms-flex-direction: column;
    
flex-direction: column;
    Показать код

    flex-direction: column-reverse;

    Скопировано 
    -webkit-box-direction: reverse;
    
-webkit-box-orient: vertical;
    
-moz-box-direction: reverse;
    
-moz-box-orient: vertical;
    
-webkit-flex-direction: column-reverse;
    
-ms-flex-direction: column-reverse;
    
flex-direction: column-reverse;
    Показать код

    flex-direction: row;

    Скопировано 
    -webkit-box-direction: normal;
    
-webkit-box-orient: horizontal;
    
-moz-box-direction: normal;
    
-moz-box-orient: horizontal;
    
-webkit-flex-direction: row;
    
-ms-flex-direction: row;
    
flex-direction: row;
    Показать код

    flex-direction: row-reverse;

    Скопировано 
    -webkit-box-direction: reverse;
    
-webkit-box-orient: horizontal;
    
-moz-box-direction: reverse;
    
-moz-box-orient: horizontal;
    
-webkit-flex-direction: row-reverse;
    
-ms-flex-direction: row-reverse;
    
flex-direction: row-reverse;
    Показать код

    Flexbox wrap

    flex-wrap: wrap;

    Скопировано 
    -webkit-flex-wrap: wrap;
    
-ms-flex-wrap: wrap;
    
flex-wrap: wrap;
    Показать код

    flex-wrap: nowrap;

    Скопировано 
    -webkit-flex-wrap: nowrap;
    
-ms-flex-wrap: none;
    
flex-wrap: nowrap;
    Показать код

    flex-wrap: wrap-reverse;

    Скопировано 
    -webkit-flex-wrap: wrap-reverse;
    
-ms-flex-wrap: wrap-reverse;
    
flex-wrap: wrap-reverse;
    Показать код

    Flexbox flow

    Скопировано 
    -webkit-flex-flow: row nowrap;
    
-ms-flex-flow: row nowrap;
    
flex-flow: row nowrap;
    Показать код

    Flexbox order

    Скопировано 
    webkit-box-ordinal-group: 2;
    
-moz-box-ordinal-group: 2;
    
-webkit-order: 1;
    
-ms-flex-order: 1;
    
order: 1;
    Показать код

    Flexbox grow

    Скопировано 
    -webkit-box-flex: 1;
    
-moz-box-flex: 1;
    
-webkit-flex-grow: 1;
    
-ms-flex: 1;
    
flex-grow: 1;
    Показать код

    Flexbox shrink

    Скопировано 
    -webkit-flex-shrink: 0;
    
-moz-flex-shrink: 0;
    
-ms-flex: 0;
    
flex-shrink: 0;
    Показать код

    Flexbox basis

    Скопировано 
    -webkit-flex-basis: auto;
    
flex-basis: auto;
    Показать код

    Flexbox flex

    Скопировано 
    -webkit-box: 1;
    
-moz-box: 1;
    
-webkit-flex: 1 0 auto;
    
-ms-flex: 1 0 auto;
    
flex: 1 0 auto;
    Показать код

    Flexbox align self

    align-self: auto;

    Скопировано 
    -webkit-align-self: auto;
    
-ms-flex-item-align: auto;
    
align-self: auto;
    Показать код

    align-self: flex-start;

    Скопировано 
    -webkit-align-self: flex-start;
    
-ms-flex-item-align: start;
    
align-self: flex-start;
    Показать код

    align-self: flex-end;

    Скопировано 
    -webkit-align-self: flex-end;
    
-ms-flex-item-align: end;
    
align-self: flex-end;
    Показать код

    align-self: center;

    Скопировано 
    -webkit-align-self: center;
    
-ms-flex-item-align: center;
    
align-self: center;
    Показать код

    align-self: baseline;

    Скопировано 
    -webkit-align-self: baseline;
    
-ms-flex-item-align: baseline;
    
align-self: baseline;
    Показать код

    align-self: stretch;

    Скопировано 
    -webkit-align-self: stretch;
    
-ms-flex-item-align: stretch;
    
align-self: stretch;
    Показать код

    Flexbox align content

    align-content: flex-start;

    Скопировано 
    -webkit-align-content: flex-start;
    
-ms-flex-line-pack: start;
    
align-content: flex-start;
    Показать код

    align-content: flex-end;

    Скопировано 
    -webkit-align-content: flex-end;
    
-ms-flex-line-pack: end;
    
align-content: flex-end;
    Показать код

    align-content: center ;

    Скопировано 
    -webkit-align-content: center;
    
-ms-flex-line-pack: center;
    
align-content: center;
    Показать код

    align-content: space-between;

    Скопировано 
    -webkit-align-content: space-between;
    
-ms-flex-line-pack: space-between;
    
align-content: space-between;
    Показать код

    align-content: space-around;

    Скопировано 
    -webkit-align-content: space-around;
    
-ms-flex-line-pack: space-around;
    
align-content: space-around;
    Показать код

    align-content: stretch;

    Скопировано 
    -webkit-align-content: stretch;
    
-ms-flex-line-pack: stretch;
    
align-content: stretch;
    Показать код

    Сокращенные префиксы

    Здесь отобраны префиксы, которые которые будут работать как минимум с последними 4-мя версиями всех основных браузеров на текущий момент. Если вам не нужна поддержка IE 6, FF 3.5 и прочих канувших в лету браузеров, и вы хотите  сократить размер CSS кода, то вполне можете использовать те префиксы для flexbox, что показаны ниже. 

    Данные собраны на основе автопрефиксера и сайта caniuse.com.

    Flexbox containers

    display: flex;

    Скопировано 
    display: -webkit-box;
    
display: -ms-flexbox;
    
display: flex;
    Показать код

    display: inline-flex;

    Скопировано 
    display: -webkit-inline-box;
    
display: -ms-inline-flexbox;
    
display: inline-flex;
    Показать код

    Flexbox justify content

    justify-content: space-between;

    Скопировано 
    -webkit-box-pack: justify;
    
-ms-flex-pack: justify;
    
justify-content: space-between;
    Показать код

    justify-content: center;

    Скопировано 
    -webkit-box-pack: center;
    
-ms-flex-pack: center;
    
justify-content: center;
    Показать код

    justify-content: flex-start;

    Скопировано 
    -webkit-box-pack: start;
    
-ms-flex-pack: start;
    
justify-content: flex-start;
    Показать код

    justify-content: flex-end;

    Скопировано 
    -webkit-box-pack: end;
    
-ms-flex-pack: end;
    
justify-content: flex-end;
    Показать код

    justify-content: space-around;

    Скопировано 
    -ms-flex-pack: distribute;
    
justify-content: space-around;
    Показать код

    Flexbox align items

    align-items: center;

    Скопировано 
    -webkit-box-align: center;
    
-ms-flex-align: center;
    
align-items: center;
    Показать код

    align-items: flex-start;

    Скопировано 
    -webkit-box-align: start;
    
-ms-flex-align: start;
    
align-items: flex-start;
    Показать код

    align-items: flex-end;

    Скопировано 
    -webkit-box-align: end;
    
-ms-flex-align: end;
    
align-items: flex-end;
    Показать код

    align-items: baseline;

    Скопировано 
    -webkit-box-align: baseline;
    
-ms-flex-align: baseline;
    
align-items: baseline;
    Показать код

    align-items: stretch;

    Скопировано 
    -webkit-box-align: stretch;
    
-ms-flex-align: stretch;
    
align-items: stretch;
    Показать код

    Flexbox direction

    flex-direction: column;

    Скопировано 
    -webkit-box-orient: vertical;
    
-webkit-box-direction: normal;
    
-ms-flex-direction: column;
    
flex-direction: column;
    Показать код

    flex-direction: column-reverse;

    Скопировано 
    -webkit-box-orient: vertical;
    
-webkit-box-direction: reverse;
    
-ms-flex-direction: column-reverse;
    
flex-direction: column-reverse;
    Показать код

    flex-direction: row;

    Скопировано 
    -webkit-box-orient: horizontal;
    
-webkit-box-direction: normal;
    
-ms-flex-direction: row;
    
flex-direction: row;
    Показать код

    flex-direction: row-reverse;

    Скопировано 
    -webkit-box-orient: horizontal;
    
-webkit-box-direction: reverse;
    
-ms-flex-direction: row-reverse;
    
flex-direction: row-reverse;
    Показать код

    Flexbox wrap

    flex-wrap: wrap;

    Скопировано 
    -ms-flex-wrap: wrap;
    
flex-wrap: wrap;
    Показать код

    flex-wrap: nowrap;

    Скопировано 
    -ms-flex-wrap: nowrap;
    
flex-wrap: nowrap;
    Показать код

    flex-wrap: wrap-reverse;

    Скопировано 
    -ms-flex-wrap: wrap-reverse;
    
flex-wrap: wrap-reverse;
    Показать код

    Flexbox flow

    Скопировано 
    -webkit-flex-flow: row nowrap;
    
-ms-flex-flow: row nowrap;
    
flex-flow: row nowrap;
    Показать код

    Flexbox order

    Скопировано 
    -webkit-box-ordinal-group: 2;
    
-ms-flex-order: 1;
    
order: 1;
    Показать код

    Flexbox grow

    Скопировано 
    -webkit-box-flex: 1;
    
-ms-flex-positive: 1;
    
flex-grow: 1;
    Показать код

    Flexbox shrink

    Скопировано 
    -ms-flex-negative: 0;
    
flex-shrink: 0;
    Показать код

    Flexbox basis

    Скопировано 
    -ms-flex-preferred-size: auto;
    
flex-basis: auto;
    Показать код

    Flexbox flex

    Скопировано 
    -webkit-box-flex: 1;
    
-ms-flex: 1 0 auto;
    
flex: 1 0 auto;
    Показать код

    Flexbox align self

    align-self: auto;

    Скопировано 
    -ms-flex-item-align: auto;
    
align-self: auto;
    Показать код

    align-self: flex-start;

    Скопировано 
    -ms-flex-item-align: start;
    
align-self: flex-start;
    Показать код

    align-self: flex-end;

    Скопировано 
    -ms-flex-item-align: end;
    
align-self: flex-end;
    Показать код

    align-self: center;

    Скопировано 
    -ms-flex-item-align: center;
    
align-self: center;
    Показать код

    align-self: baseline;

    Скопировано 
    -ms-flex-item-align: baseline;
    
align-self: baseline;
    Показать код

    align-self: stretch;

    Скопировано 
    -ms-flex-item-align: stretch;
    
align-self: stretch;
    Показать код

    Flexbox align content

    align-content: flex-start;

    Скопировано 
    -ms-flex-line-pack: start;
    
align-content: flex-start;
    Показать код

    align-content: flex-end;

    Скопировано 
    ms-flex-line-pack: end;
    
align-content: flex-end;
    Показать код

    align-content: center ;

    Скопировано 
    -ms-flex-line-pack: center;
    
align-content: center;
    Показать код

    align-content: space-between;

    Скопировано 
    -ms-flex-line-pack: justify;
    
align-content: space-between;
    Показать код

    align-content: space-around;

    Скопировано 
    -ms-flex-line-pack: distribute;
    
align-content: space-around;
    Показать код

    align-content: stretch;

    Скопировано 
    -ms-flex-line-pack: stretch;
    
align-content: stretch;
    Показать код