После обновления chrome 69 flex box создает проблемы в макете. Потомки гибкого бокса выскакивают и смещаются вверх.
Этот пост был посвящен основному влиянию на макеты страниц, которое было вызвано обновлением до версии 69 браузера Chrome.
Я удалил флекс-основу, и он снова выглядит хорошо
Уловка заключается в свойствах отображения порядка или css. Так что не все будут сталкиваться с этой проблемой.
Когда мы предоставляем несколько свойств для flex, chrome 69 требует, чтобы мы указывали их в определенном порядке.
"display: flex" должно быть после "display: -webkit-box".
Правильный код
display: -webkit-box;
display: flex;
Код, вызывающий ошибку
display: flex;
display: -webkit-box;
Размещение свойства без префикса W3C последним (после версий с префиксом) является стандартной практикой. Всегда рекомендуется.
Правда. Но если порядок отличается, это вызывает серьезную проблему с макетом в браузере Chrome после его обновления до версии 69. Многие люди пострадали бы и сидели без подсказки. Этот пост был им в помощь.
Разве последнее не отменяет полностью?
Да, но ничего страшного, если это произойдет. display: flex;
- это новое свойство, поэтому всегда полезно переопределить с его помощью display: -webkit-box;
. Браузеры, для которых требуется display: -webkit-box;
, не поддерживают display: flex;
, поэтому переопределения не произойдет.
Это то, о чем я думал. Я работаю над проектом, использующим Vue / Vuetify, и
<v-divider>
внезапно принимает огромную высоту из-за свойстваflex: 1 1;
.