После обновления 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
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
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

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