После обновления chrome 69 flex box создает проблемы в макете

После обновления chrome 69 flex box создает проблемы в макете. Потомки гибкого бокса выскакивают и смещаются вверх.

Это то, о чем я думал. Я работаю над проектом, использующим Vue / Vuetify, и <v-divider> внезапно принимает огромную высоту из-за свойства flex: 1 1;.

Bonlou 13.09.2018 21:42

Этот пост был посвящен основному влиянию на макеты страниц, которое было вызвано обновлением до версии 69 браузера Chrome.

sujithuix 16.09.2018 18:59

Я удалил флекс-основу, и он снова выглядит хорошо

Dusty 21.09.2018 22:46
3
3
1 697
1

Ответы 1

Уловка заключается в свойствах отображения порядка или css. Так что не все будут сталкиваться с этой проблемой.

Когда мы предоставляем несколько свойств для flex, chrome 69 требует, чтобы мы указывали их в определенном порядке.

"display: flex" должно быть после "display: -webkit-box".

Правильный код

display: -webkit-box;
display: flex;

Код, вызывающий ошибку

display: flex;
display: -webkit-box;

Размещение свойства без префикса W3C последним (после версий с префиксом) является стандартной практикой. Всегда рекомендуется.

Michael Benjamin 14.09.2018 04:49

Правда. Но если порядок отличается, это вызывает серьезную проблему с макетом в браузере Chrome после его обновления до версии 69. Многие люди пострадали бы и сидели без подсказки. Этот пост был им в помощь.

sujithuix 16.09.2018 18:56

Разве последнее не отменяет полностью?

Ben Taliadoros 25.09.2018 18:41

Да, но ничего страшного, если это произойдет. display: flex; - это новое свойство, поэтому всегда полезно переопределить с его помощью display: -webkit-box;. Браузеры, для которых требуется display: -webkit-box;, не поддерживают display: flex;, поэтому переопределения не произойдет.

sujithuix 27.09.2018 17:47

Другие вопросы по теме