Flexbox и перенос блоков в safari?

@fruttin · Регистрация: 05.02.2015

Студворк — интернет-сервис помощи студентам

Добрый вечер!
Первый опыт верстки с использованием flexbox. Очень понравилось, писаю кипятком

Но у нас же не может быть все просто. IE, не беда, сделал элементы inline-block (кстати, если inline-block прописать в основном style.css, то safari ругается на flexbox) и выставил нужный margin. А вот с safari как бороться не знаю.
Проблема заключается в переносе элементов при сужении окна браузера (при уменьшении разрешения экрана)
https://jsfiddle.net/5ckjyh79/1/ - пример кода.

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrap">
  <ul class="box-list">
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
    <li class="box-item"></li>
  </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.wrap{
  width:600px;
}
.box-list{
    list-style:none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.box-item{
  width:100px;
  height:100px;
  background:#ccc;
  margin:0 0 20px;
  display:block;
}

Все браузеры молодцы, скидывают непоместившийся блок вниз и поехали дальше, но safari уменьшает лишь ширину между блоками и в последствии появляется прокрутка.
Буду благодарен за любую помощь!

@Artemeey · 06.03.2017, 16:50

Достаточно использовать свойство, которое поддерживают все современные браузеры: flex-wrap: wrap;

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Artemeey 0 / 0 / 1 Регистрация: 15.09.2013 Сообщений: 7
	06.03.2017, 16:50
	Достаточно использовать свойство, которое поддерживают все современные браузеры: flex-wrap: wrap; 0