Flexbox не работает в каких браузерах

Обновлено: 22.11.2024

Главная › Форумы › CSS › Flexbox не работает в chrome

Почему это не работает?

Я пишу нужные префиксы:

Он работает, просто вы не указали ему слишком много :-)

Я забыл упомянуть об этом :)

Дело в том, что он должен быть отзывчивым.
Первую и вторую картинку приходится обрезать, пока я уменьшаю размер экрана, а третью исправлю.

В Firefox это отзывчиво.
В Chrome этого нет. Почему?

Ах, понятно. Итак, просто чтобы убедиться, что я понимаю, что вы ищете, вы хотите, чтобы изображения 1 и 2 были обрезаны на меньших экранах, а третье изображение оставалось того же размера?

Чтобы обеспечить такое поведение в разных браузерах, можно присвоить изображениям 1 и 2 свойство max-width. Например, вы можете попробовать max-width: 20%; высота автоматически, чтобы гарантировать, что они уменьшаются с размером экрана.

Однако, если вам нужна галерея адаптивных изображений, я бы предпочел установить flex-wrap для контейнера .boxes и, возможно, изменить flex-direction на столбец на небольших экранах :)

Робквуд: Да, вы понимаете, чего я хочу.
Но с «max-width» картинки будут растянуты.

Решение Bearhead: оно не работает в Chrome.

Это должно быть решено более простым способом. Не с флексбоксом.
Я пытаюсь….

Не могли бы вы описать, что вы подразумеваете под «не работает»? Опубликованная мной версия в основном ведет себя на хроме, ff и т. е. так же, как и ваш оригинал на ff.

Я использую Chrome 54.0.2840.99 m на Windows 10.

Мой Firefox и мой Chrome работают по-разному. Высота изображений меняется, уменьшается.
Цель состоит в том, чтобы высота была фиксированной, менялась только ширина.

Версия моего Chrome – 49.
Он что-то не поддерживает?

Возможно, есть разница в том, как каждая версия реализует flexbox? Вы можете попробовать изменить высоту: 400 пикселей; декларация из .fix в img

Вы правы, он работает, я проверил его в другом Chrome.
Но проводник не поддерживает сопоставление объектов.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Flexbox — это очень круто, и за ним, безусловно, будущее верстки. Синтаксис сильно изменился за последние несколько лет, отсюда и «старый» и «новый» синтаксис. Но если мы объединим старый, новый и промежуточный синтаксис, мы сможем получить достойную поддержку браузеров. Особенно для простого и, вероятно, самого распространенного варианта использования: сеток с контролем порядка

Семантически бессмысленная оболочка обходит три основные области и устанавливает контекст flexbox. Каждая из областей семантически размечена и будет превращена в столбцы.

Конечный результат выглядит следующим образом:

Нам нужно сделать контейнер для наших столбцов контекстом отображения flexbox. Просто делая это, все прямые дочерние элементы этого элемента становятся гибкими элементами. Неважно, чем они были раньше, теперь это гибкие элементы.

Сразу же нам нужно объединить старый, новый и твинерный синтаксис. Здесь важен порядок. Поскольку само свойство display не имеет префикса, нам нужно убедиться, что мы не переопределяем новый синтаксис старым синтаксисом для браузеров, которые до сих пор (и, вероятно, всегда будут) поддерживать оба.

Управление шириной столбцов

Наша цель — создать сетку 20 % / 60 % / 20 %.

Шаг 1 – установить основное содержание на 60 %.
Шаг 2 – настроить внешние боковые панели так, чтобы они равномерно заполняли оставшееся пространство.

Снова нам нужно объединить старый, новый и твинерный синтаксис.

В новом синтаксисе задавать ширину для боковых панелей необязательно, так как оставшиеся 40 % будут заполнены в равной степени, что составит 20 %. Но я обнаружил, что не устанавливая его, некоторые значения ширины рушатся из-за старых синтаксисов.

Мы хотим, чтобы основной контент визуально отображался посередине, но был первым в исходном порядке. Во flexbox это легко, но, конечно, нам нужно сплести воедино новый, старый и твинерный синтаксис.

Если вы сделаете все это плетение, вы можете получить:

Chrome любой
Firefox любой
Сафари любое
Опера 12.1+
Интернет 10+
iOS любая
Android любой

Самым большим ограничивающим фактором, конечно же, является IE, но в остальном он довольно хорош. Если вы делаете мобильную версию сайта, вы в еще лучшей форме. Если кто-то может протестировать его на Windows Phone, дайте мне знать.

Firefox 19 — немного глючит, и вам нужно за этим следить. Например, в этой демонстрации я не смог придумать, как сделать боковые панели равными 20%. Просто сворачивается по ширине содержимого внутри, что немного произвольно, так как это текст.Мне также понадобился -moz-box-flex: 1; на основном содержании (60%), в противном случае он растянулся бы до ширины самого широкого абзаца, как если бы в нем было пробел: nowrap , что для меня просто необъяснимо.

Кому не нравится поддержка новых функций CSS в браузерах? Никто, я думаю. В последнее время многие люди в восторге от поддержки свойства gap для flexbox в браузерах Chromium (Chrome, Edge). Свойство gap — это попытка использовать одно и то же свойство для сетки CSS и flexbox. Он будет отвечать за интервалы (промежутки) между столбцами и строками.

Прежде чем углубляться в детали, я хочу кратко объяснить, как работает grid-gap или gap. Просто он добавляет интервал между столбцами и строками. Смотрите видео ниже:

Изначально зазор выполнялся с помощью grid-gap .

Однако вместо этого оно заменяется свойством пробела. И это работает следующим образом:

Не нужно использовать префикс grid- .

Пролить свет на проблему

Я создал очень абстрактную демонстрацию двух оболочек, grid и flex соответственно. Я использовал пробел для определения интервала между дочерними элементами.

Как видите, разрыв отлично работает как для сетки CSS, так и для гибкости — в браузерах, которые их поддерживают. Однако для неподдерживающих браузеров, таких как старые версии Chrome и Safari, результат будет выглядеть так, как показано на рисунке ниже.

Поддержка браузерами пробелов Grid и Flexbox

Несмотря на то, что это свойство одинаково, его поддержка различается в сетке и во флексбоксе. Это смущает. Обратите внимание на приведенные ниже таблицы поддержки.

Поддержка промежутков Flexbox

Поддержка разрыва сетки

Для получения дополнительной информации о поддержке, пожалуйста, проверьте flexbox gap и grid gap на CanIUse.

Разрыв flexbox появился довольно недавно, так как же мы можем использовать его в реальных проектах? Принимая во внимание, что мы должны сначала определить его поддержку.

Обнаружение поддержки разрыва flexbox

Для CSS flexbox свойство gap сначала поддерживалось в Firefox, а затем Chromium объявил, что это свойство теперь поддерживается. Отличные новости, но у меня важный вопрос.

Как мы можем определить, поддерживается ли зазор для flexbox или нет?

Возможно, вы думаете об использовании CSS @supports? Мне жаль сообщать вам, что невозможно обнаружить пробел с помощью правила CSS @supports. Согласно обсуждению в этой ветке CSSWG, кажется, что нет никакого способа обнаружить это.

Описанное выше не работает.

Читая ветку, я заметил несколько интересных и возможных предложений по этой проблеме.

Полугодовое обновление Compat 2021 — попытка устранить проблемы совместимости браузеров в пяти ключевых областях: CSS flexbox, CSS Grid, положение: фиксированное, соотношение сторон и преобразования CSS.

Усовершенствования Chromium, обсуждаемые в этом посте, коснутся Chrome, Edge и всех браузеров на основе Chromium.

Вы можете проверить на панели инструментов Compat 2021 тесты веб-платформы, чтобы увидеть количество пройденных тестов и графики тенденций для разных браузеров.

Ключевой термин

Проект web-platform-tests – это кроссбраузерный набор тестов для веб-платформы. Тесты периодически запускаются в нескольких браузерах, а результаты доступны на информационной панели wpt.fyi.

Простой показатель «пройденные тесты» не дает полного представления о совместимости браузеров, однако это один из сигналов, который мы используем для наблюдения за ходом нашей работы. Чем меньше различий между браузерами в результатах тестов, тем выше совместимость веб-функции в нескольких браузерах.

Снимок панели мониторинга Compat 2021 (экспериментальные браузеры).

Все три браузерных движка улучшили flexbox.

В Safari 14.1 добавлено свойство gap для flexbox . Свойство gap — это удобный способ установить расстояние между элементами. Это свойство часто используется в макете Grid, а поддержка в макете flexbox была одной из наиболее востребованных функций в отчете о совместимости браузера MDN.Благодаря этому обновлению свойство gap во гибких макетах доступно во всех основных браузерах, и решена основная проблема совместимости. Safari 14.1 также включает множество исправлений для изображений во flexbox, устраняя необходимость в старых обходных решениях.

Firefox разрешил рендеринг таблиц как гибких элементов, приблизив Firefox к 100 % прохождению тестов (в настоящее время 98,5 %).

Фиксированные таблицы Chromium также могут использоваться как гибкие элементы. В Chromium 88 изображения также были переписаны как гибкие элементы, исправив ряд давних ошибок. Наконец, Chromium недавно добавил поддержку новых ключевых слов выравнивания: start, end, self-start, self-end, left и right. Эти ключевые слова можно попробовать в Chrome Canary и Edge Canary.

Использование CSS Grid неуклонно растет и в настоящее время составляет 9 % просмотров страниц. Все три основных браузерных движка реализуют CSS Grid и уже проходят более 89% тестов соответствующих веб-платформ. Устранение разрыва в совместимости важно для поддержки постоянного развития этой функции.

На данный момент в 2021 году процент прохождения тестов Safari увеличился с 89% до 93%, а Chromium работает над новой архитектурой для решения большего количества проблем CSS Grid, которая называется GridNG. Это усилия, возглавляемые командой Microsoft, привели к недавнему увеличению с 94% до 97% в целевых тестах Grid. Вскоре вы можете ожидать обновленную информацию о GridNG в блоге Edge.

В Chromium позиция: липкая для заголовков таблиц была исправлена с запуском TablesNG — многолетней работы по изменению архитектуры рендеринга таблиц. Это изменение, а также несколько окончательных исправлений помогли каналу разработчиков Chrome и Edge 93 пройти 100 % целевых тестов.

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

Аспектное соотношение теперь поддерживается в стабильных версиях Chrome, Edge и Firefox, а также в бета-версии Safari 15. По мере улучшения поддержки разных браузеров использование увеличивается.

Несмотря на то, что ни один браузер не проходит тесты на 100 %, разница в совместимости по соотношению сторон является наименьшей из всех пяти приоритетных областей Compat 2021. Для всех основных браузеров тесты проходят более 90 %. В будущем мы продолжим следить за прогрессом, используя этот набор тестов, чтобы сделать его надежной функцией.

Подробнее об использовании и преимуществах соотношения сторон в web.dev.

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

Команда Chromium также работает над улучшением совместимости transform-style: save-3d и transform :perspective() . Мы надеемся, что в следующем обновлении мы сможем рассказать о большем прогрессе.

С момента объявления в марте все три браузерных движка улучшили свои показатели Compat 2021:

Chrome и Edge Dev поднялись с 86 до 92.
Firefox поднялся с 83 до 86.
Safari вырос с 64 до 82.

Примечательно, что Safari удалось сократить разрыв в совместимости на 18 пунктов благодаря большой работе участников WebKit. В частности, команда Igalia внесла свой вклад в свойство соотношения сторон и множество улучшений Flexbox и Grid, таких как зазор для flexbox и различные исправления ошибок.

Чтобы следить за ходом Compat 2021, следите за панелью управления, подпишитесь на наш список рассылки или свяжитесь с нами по адресу @chromiumdev. Если у вас возникнут какие-либо проблемы, обязательно сообщите об ошибке для уязвимого браузера.

Читайте также: