§ Использование display: flex на сафари

С появлением display: flex; стало гораздо проще центрировать блоки по центру родителя, как по горизонтали, так и по вертикали. Но на браузерах сафари такая верстка работать не будет:

1
2
    display: flex;
    align-items: center;

Все дело в вендорных префиксах. Safai, так же как и Chrome, является WebKit браузером. Поэтому, для решения проблем с display: flex;, нужно использовать правильные префиксы. Например, так:

1
2
3
4
5
6
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

Кстати, существует отличный автопрефиксер CSS.

12 апреля
Теги: