Обходной путь Flexbox для Safari
Я закончил свой веб-сайт, но я не понял, что сафари не поддерживает разрыв flexbox. Есть ли способ обойти это, ничего не испортив? Это в основном для моих медиа-запросов.
<div class = "social-media">
<a href = "https://github.com/">
<img class = "social-media__icon" src = "img/github.png" alt = "Github">
</a>
<a href = "https://www.linkedin.com/">
<img class = "social-media__icon" src = "img/linkedin.png" alt = "LinkedIn">
</a>
</div>
.social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8rem;
margin-top: 10rem;
padding-bottom: 2rem;
}
.social-media img {
width: 90px;
height: 90px;
}
@media only screen and (max-width: 400px) {
.social-media {
gap: 3rem;
margin-top: 5rem;
}
.social-media img {
width: 62px;
height: 62px;
}
}
Ответы 5
Я думаю, вы могли бы сделать контейнер div и поместить justify-content: space-between; тогда думаю должно работать
поместите div вокруг элементов, которым нужен зазор, а затем поместите display: flex; и обосновать-содержание: пробел-между; в теме. затем сделайте ширину каждого элемента примерно 30%, если это три элемента, а оставшийся процент будет промежутком между ними.
Используйте селектор Lobotomized owl: .parent > * + * {}, чтобы добавить поле слева, которое дает вам пространство между элементами, которые идут после другого элемента, таким образом вы устраняете нежелательное поле, которое оно создает, когда вы помещаете поле непосредственно в первый элемент ребенка (.social-media img{})
.social-media > * + * { margin-left: 8rem;}
Здесь вы можете узнать больше о Селекторе лоботомированных сов
Обновлено: Gap теперь поддерживается в Safari 14.1 (сентябрь 2021 г.), поэтому вы сможете использовать его без проблем.
Ни пробел, ни пробел в колонке у меня в Safari по-прежнему не работали. Это сработало как шарм.
на всякий случай, если вам интересно, как использовать это внутри mui, мы могли бы просто сделать в родительском элементе: '& > *+*': { marginTop: '16px' }
В сафари работало нормально. Большой.
Gap работает как по вертикали, так и по горизонтали. Что делать, если у нас есть много элементов, которые создают разрывы строк? левое поле не будет вести себя так, как ожидалось
@KCarnaille добавление margin-right (включая первое), вероятно, даст наилучший результат в этом случае, каждый первый элемент в новой строке будет начинаться с одного и того же места по вертикали, но будет иметь пробел справа, который все еще будет равен если элементы имеют одинаковую ширину, что похоже на поведение flex-wrap, вы также можете поиграть с отрицательными полями/отступами в контейнере, чтобы устранить нежелательное пространство в конце строки
Свойство gap с display: flex не поддерживается версией Safar < 14 https://caniuse.com/flexbox-gap.
Возможно, вы захотите заменить отображение flex на grid:
display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem; /* Safari 12+ */
потому что разрыв сетки поддерживается в старых версиях Safari: https://caniuse.com/mdn-css_properties_gap_grid_context
Принятый ответ имеет проблему, заключающуюся в том, что у вас будет неправильное поле для первого элемента, если есть только одна строка. Также центрированные элементы всегда будут на 8rem слишком далеко вправо.
Лучшее решение, которое всегда будет работать с правильными интервалами:
.container {
display: flex;
// the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
margin: 0 -10px -20px -10px;
}
.box {
min-width: 100px;
height: 100px;
background-color: deeppink;
margin: 0 10px 20px 10px;
}<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>Вы можете удалить класс пробела и добавить еще один к дочерним элементам.
<div class = "d-flex"> // it was "d-flex gap" previously
<div class = "mx-2">
//content
</div>
<div class = "mx-2">
//content
</div>
</div>
куда вставить див? Я что-то пробовал, и это не работает