Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox still being spotty in Safari, flex-wrap not working

I have perused the forums looking for an answer to this, but still nothing works. I am using CSS3 flexbox styling for a footer on my website. HTML is as follows:

<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>

And my CSS is as follows...its a little dirty bc Ive been trying a bunch of stuff to work:

.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;
}

This works fine on every browser, except Safari- the wrapping does not occur. What am I missing here that would not allow for wrapping?

like image 299
la1ch3 Avatar asked Nov 09 '22 14:11

la1ch3


1 Answers

Just for anyone wondering:

I had way may too much prefixing going on which was throwing off Safari's webkit. I was able to solve this issue by using proper flexbox rules (for example, using flex as shorthand and not declaring flex-grow or flex-shrink) and using Autoprefixer to handle vendor prefixing.

like image 117
la1ch3 Avatar answered Dec 01 '22 01:12

la1ch3