Помогите, пожалуйста, исправить неработающий flex на сафари.
Во всех браузерах все отлично работает, а в сафари что-то не получается. Версия Safari 5.1.7 (7534.57.2)
Блоки не смещаются вниз совсем, все 6 штук в строку располагаются и, соответственно, появляется горизонтальная прокрутка.
Как "подружить" стили с safari?
После прогона через автопрефиксер я получила такой код, который не дает нужного результата:
<!-- Стили для меню картинками-->
.container {all: initial;}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-item-align: center;
align-self: center;
}
.choice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-image: url(Plan.jpg);
width: 200px;
height: 250px;
margin: 5px;
border: 1px solid #D3D3D3;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.justify-content-between {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.container { width: 80%; margin: 0 auto;
inherit: none;}
.d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
break{
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}
@media screen and (max-width: 1505) .line-break { width: 100%;}
@media screen and (
max-width: 1488) {
.line-break {
width: 0%;}
.container {inherit: none;
width: 40%;
max-width: 1200 px;
margin: 0 auto; }
}
@media screen and (max-width: 1100) {
.container {inherit: none;
width: 95%;}
nav {-ms-flex-line-pack: center;align-content: center;}
.wrapper {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
}
@media screen and (max-width: 1487) {
break {display: none;}
}
@media screen and (min-width: 1488 and max-width: 2193) {
section: nth-child(3n)
after;
}
<!--Конец стилей меню-картинками -->
<div class="container">
<nav class="wrapper d-flex justify-content-between flex-wrap">
<section class="choice" onclick="location.href='http://www.baseflat.ru/database.html';">
<figure>
<h3><a href="">Последнее обновление</a></h3>
<br>
<img src="Today-final.jpg" alt="Все квартиры за сегодня"> <figcaption>Адреса
и описания / Все варианты за сегодня</figcaption> </figure>
</section>
<section class="choice" onclick="location.href='http://www.baseflat.ru/area.html';">
<figure>
<h3 class="select"><a href="">По районам СПб</a></h3>
<br>
<img src="Metro-distr-final.jpg" alt="Квартиры по районам и метро">
<figcaption>Длительная аренда по районам и метро</figcaption> </figure>
</section>
<section class="choice" onclick="location.href='http://www.baseflat.ru/sut.html';">
<section class="line-break"></section>
<figure>
<h3><a href="">Посуточные квартиры</a></h3>
<br>
<img src="Sutochno-final.jpg" alt="Аренда на несколько дней"> <figcaption>
Квартиры в аренду на короткие сроки</figcaption> </figure>
</section>
<section class="choice" onclick="location.href='http://www.baseflat.ru/database.html';">
<figure>
<h3><a href="">Однокомнатные квартиры</a></h3>
<br>
<img src="1KKV-final.jpg" alt="Снять однокомнатную квартиру в СПб">
<figcaption>Снять однокомнатную квартиру в СПб</figcaption> </figure>
</section>
<section class="choice" onclick="location.href='http://www.baseflat.ru/area.html';">
<figure>
<h3><a href="">Двухкомнатные квартиры</a></h3>
<br>
<img src="2KKV-final.jpg" alt="Снять двухкомнатную квартиру в СПб">
<figcaption>Снять двухкомнатную квартиру в СПб </figcaption> </figure>
</section>
<section class="choice" onclick="location.href='http://www.baseflat.ru/sut.html';">
<figure>
<h3><a href="">Трехкомнатные квартиры и более</a></h3>
<br>
<img src="3KKV-final.jpg" alt="Снять трех-, четырехкомнатную квартиру в СПб">
<figcaption> Снять трехкомнатную, четырехкомнатную ...</figcaption>
</figure>
</section>
</nav>
</div>
Помогите, чем можете, люди добрые!
display: -webkit-box;
должно бытьdisplay: -webkit-flex;
и остальное тоже требует исправления