Проблемы с Flexbox в Safari

Question

Я тестирую некоторые вещи с помощью flexbox, но у меня возникли некоторые проблемы. Я уже искал форумы, но не нашел ответа, который я искал, поэтому я подписался здесь в надежде найти ответ.

Теперь я знаю, что должен предоставить некоторый запасной вариант, и я буду в будущем, но на данный момент я не могу заставить flexbox работать в Safari (рабочий стол ни мобильный). Я попробовал -webkit-префикс, который предлагается http://caniuse.com/#feat=flexbox, но он просто не работает.

Я, вероятно, просто что-то пропустил, но я не могу разобраться.

Я сделал ручку, которая работает в Chrome, но не в Safari ...

HTML

<div class="aligner"> 
    <h1>Flexbox Testing</h1> 
</div> 

CSS

body, html { 
    height: 100%; 
    width: 100%; 
} 

.aligner { 
    height: 100%; 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Это ссылка на Codepen http://codepen.io/linkerd/pen/vHibq

Я очень благодарен за помощь!

Заранее спасибо.

Stef

Answer 1

Safari все еще нуждается в префиксы для Flexbox.

Добавить:

.aligner { 

    -webkit-align-items: center; 
    -webkit-justify-content: center; 
} 

Pen:

http://codepen.io/anon/pen/xbamKx

Действительно полезный инструмент для избежания этой головной боли является autoprefixer. Он работает с grunt, gulp, command-line и т. Д.