Как правильно использовать flexbox?

Изучил флексы довольно подробно, написал пару тестовых проектов и один "живой", используя технологию flexbox.
У меня один ПК с Ubuntu и все. Нет Mac, нет IOS.

Вопрос: как я должен верстать на флексах, о чем должен помнить, чтобы не было проблем с кроссбраузеностью в safari и ios.

UPD: coha.look-website.xyz - последний мой проект, в котором наблюдаются косяки только в браузере Safari, а таже в Safari и Chrome под IOS, где проблему выявить так и не удалось.
  • Вопрос задан
  • 572 просмотра
Решения вопроса 3
@Flicker
*-coder
У меня один ПК с Ubuntu и все. Нет Mac, нет IOS.

Если мощность компьютера позволяет, то установите VMware + Mac OS + Xcode

coha.look-website.xyz - последний мой проект, в котором наблюдаются косяки только в браузере Safari, а таже в Safari и Chrome под IOS, где проблему выявить так и не удалось.

Вы используете только -ms префикс добавьте ещё -webkit префикс.
На примере .main класса:
у вас:
.main {
    max-width: 1170px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

а какой должен быть:
.main {
    max-width: 1170px;
    margin: 0 auto;
     display: inline-block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-justify-content:space-between;
    justify-content: space-between;
    -ms-flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
Ответ написан
dom1n1k
@dom1n1k
Открыл сейчас сайт на айпаде - действительно, верстка поехавшая. Но локализовать ошибку так вот сходу не могу.
Поищи тут по слову Safari: https://github.com/philipwalton/flexbugs
Ответ написан
zooks
@zooks
Frontend и Django
Пригласить эксперта
Ответы на вопрос 1
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
Частенько вертска едет из-за отсутствия flex-bazis - вы можете задавать его в тех же величинах (в процентах лучше, конечно) и поддержать через width или max-width. Но с max-width - все темно - часто мобилы с сафари это свойство игнорируют как факт.

Еще хак - поиграйтесь с flex: 1 0 initial; - тут самое интересное именно initial.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы