5
Przeglądałem fora szukając odpowiedzi na to pytanie, ale wciąż nic nie działa. Używam stylizacji CSS3 flexbox dla stopki na mojej stronie. HTML jest następujący:Flexbox wciąż jest niekonsekwentny w Safari, flex-wrap nie działa
<footer class="footer" role="contentinfo">
<!-- copyright -->
<div id="box1" class="box">
<a class="btn" id="btn-donate" href="#">Donate</a>
<a class="btn" id="btn-news" href="#">Get News</a>
</div>
<div id="box2" class="box">
<h2>Quill Theatre</h2>
<p>P.O. Box 7265<br>
Richmond, VA 23221</p>
<p>[email protected]<br>
804.340.0115</p>
<span>Social goes here</span>
</div>
<div id="box3" class="box">3</div>
<!-- /copyright -->
</footer>
A mój CSS jest następująco ... jej trochę brudny bc Ive próbuje kilka rzeczy do pracy:
.footer {
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-flex-flow: row wrap;
width: 100%;
}
.footer .box {
order: 1;
min-width: 50%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex-shrink: 1;
flex-basis: auto;
-webkit-flex-shrink: 1;
-webkit-flex-basis: auto;
}
.footer #box2 {
order: 0;
min-width: 100%;
flex: 2 2 auto;
-webkit-flex: 2 2 auto;
-ms-flex: 2 2 auto;
text-align: center;
border-top: 3px solid black;
border-bottom: 3px solid black;
padding-bottom: 2em;
}
.footer #box2 h2 {
text-transform: uppercase;
}
Działa to dobrze w każdej przeglądarce z wyjątkiem Safari - owijanie nie występuje. Czego tu mi brakuje, co nie pozwoliłoby na pakowanie?
Która wersja Safari? – cimmanon
Najnowsza wersja, 8.0.4. Od tego czasu dostosowałem moje prefiksy i otrzymałem wszystko, aby przesłać jedną linię, ale wciąż nie ma żadnego zawijania w Safari. – la1ch3
Nie spodziewam się, że ma to znaczenie, ponieważ Safari jest wciąż wymieniane jako wymagające prefiksy, ale twoje nieskasowane właściwości powinny być ostatnie. Jesteś także nadmiarowy, określając kierunek flex, flex-wrap i flex-flow. – cimmanon