Вопрос по flexbox, css – flex-wrap не работает должным образом в Safari

47

На домашней страницеhttp://www.shopifyexperte.de/ есть два модуля flex-box, один под «Kundenstimmen» и один под «Neueste Beiträge ...». Внутренние коробки должны оборачиваться, когда они опускаются ниже 220 пикселей и не растут выше 30% ширины. Это работает в последних версиях Chrome, FF и Opera (все на Mac), но в Safari 8.0.5 (Mac) и любом браузере iOS блоки никогда не образуют ряд, даже если места достаточно. Они всегда обертывают, каждый на свой ряд.

CSS для контейнера:

.homepage-testimonial-container {
	display: flex;
	display: -webkit-flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 1em;
}

CSS для блоков внутри контейнера:

.homepage-testimonial {
	margin-bottom: 1em;
	min-width: 220px;
	max-width: 30%;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

Если я отключу -webkit-flex-wrap (фактически установив его в nowrap), все блоки выстраиваются в ряд, но в конечном итоге переполняют контейнер, когда окно браузера становится слишком узким.

Это какая-то ошибка в Safari / Webkit или я что-то здесь не так делаю?

Ваш Ответ

7   ответов
0

flex-flow'. Работал как шарм.

.row {
    @include flex();
    @include flex-wrap();
    flex-flow: row;
}
7

3 в сочетании с display: flex на моих элементах .row. Я добавил следующее к моему css, чтобы предназначаться для элементов колонки. Кажется, в Safari есть проценты ширины, которые не соблюдаются должным образом.

.row [class*=col-]{
    margin:0 -.3px;
}
Я только что столкнулся с этой проблемой (Safari 11, Bootstrap 3). Когда я используюdisplay: flex а такжеflex-wrap: wrap в строке с четырьмя столбцами Safari отображает только три столбца в строке, а не четыре. Установка отрицательных левых / правых полей, как показано выше, исправляет это. daGUY
33

это ошибка в Safari. В отдельном выпуске я протестировал использование минимальной ширины вместоauto в строках, где вы говорите что-то вроде-webkit-flex: 1 1 auto;.

Этот вопрос имеет некоторую информацию:https://stackoverflow.com/a/30792851/756329

Ошибка кажетсязакрыто всего пару дней назад, поэтому мы можем ожидать исправления в следующей версии Safari. joepio
@JoepMeindertsma - это не имеет большого значения, так как вам все еще нужно поддерживать версии браузера +2 года .. vsync
8

настройкаflex-basis: 20em также работает,min-width: 20em не.

29

Установите дочерние элементы, как это, кажется, работает для меня

flex: 1 0 auto;
@Dave Давай пока не будем выходить из группы. Сейчас 2017 год, и Safari еще предстоит пройти долгий путь, чтобы догнать любого из своих конкурентов. DreamTeK
Да, Safari 9 в значительной степени имеет flexbox, работающий так же, как и Chrome. Но это было не так с 8. Dave
Вероятно, это связано с тем, что в последних обновлениях Safari наконец-то все работает правильно. Joseph Hansen
flex:1; работает на iOS 10.3.2, но не на 10.2.2 vanduc1102
14

strap 3 (например, col-md-4) в сочетании с flex. Я решил это, установивmargin: 0 -1px; на предметах col иflex-wrap: wrap; на обертке.

Это исправлено! Благодаря тонну. Keith Pickering
Вот и все, единственная строка, которая исправляет все под iOS. По моему мнению, это решение является лучшим, поскольку оно сохраняет свойства гибкости и все остальное без изменений, не изменяя ваш общий дизайн и все с минимальной шириной и прочее. David
Я думаю, что это имеет отношение к округлению пикселей Safari без десятичных знаков при расчете. eye-wonder
4

flexbugs страницы, но процитировать это:

Safari использует объявления минимальной / максимальной ширины / высоты для фактического отображения размера гибких элементов, но игнорирует эти значения при расчете количества элементов в одной строке многострочного гибкого контейнера. Вместо этого он просто использует значение flex-based элемента или его ширину, если для flex-основы установлено значение auto.

Таким образом, исправление / обходной путь - как предлагают другие ответы здесь - это установитьflex-basis на явную ширину, а неauto.

Похожие вопросы