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

Question

[Константин Отпущенников]

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

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

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

Comments

[Денис Букреев]

Суть в том, что ты не можешь вообще верстать, если у тебя нет под рукой хотя бы имитации необходимых браузеров.
А если все-таки ты верстаешь, без надлежащего тестирования то ты - быдлокодер.

Answer 1

[Vladimir T]

У меня один ПК с 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;
}

Comments

[dom1n1k]

Я тоже первым делом про префиксы подумал, но дело всё же не в них - айось 9+ уже поддерживает флексбокс без префиксов, однако же, там все поехавшее. Наверняка ошибка именно в коде, он там какой-то очень нагроможденный.

Я встречал реальные случаи, когда люди косячили в логике флексбоксе, а потом писали "ой, а вот везде работает и только FF глючит". А начнешь разбираться в коде, там такое безумие, что наоборот странно почему оно в вебките работает :) Чисто случайно наверное.

[Константин Отпущенников]

Vladimir T gulp-autoprefixer используете? Как его настроить так, чтобы webkit префиксы тоже проставлялись? Сейчас у меня стоит [last 2 version] З.Ы. - обычный вопрос, просто на самом деле я вме же думаю, что дело не в префиксах.

[Vladimir T]

Константин Отпущенников, добавьте 'iOS >= 8', в browsers. Возможно что и другое , но это первое что кинулось в глаза.

[Константин Отпущенников]

Vladimir T спасибо

Answer 2

[dom1n1k]

Открыл сейчас сайт на айпаде - действительно, верстка поехавшая. Но локализовать ошибку так вот сходу не могу.
Поищи тут по слову Safari: https://github.com/philipwalton/flexbugs

Comments

[Константин Отпущенников]

dom1n1k спасибо за ссылку, отличный проект, даже не знал о таком. Но пока подожду еще ответов :)

Answer 3

[zooks]

Видимо из-за врапперов:
https://github.com/philipwalton/flexbugs#11-min-an...

Comments

[Константин Отпущенников]

zooks скажите, какую именно закономерность вы имеете ввиду?)

[zooks]

Константин Отпущенников: 11-ю

Answer 4

[Полина Емельянова]

Частенько вертска едет из-за отсутствия flex-bazis - вы можете задавать его в тех же величинах (в процентах лучше, конечно) и поддержать через width или max-width. Но с max-width - все темно - часто мобилы с сафари это свойство игнорируют как факт.

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