Question

我已经仔细阅读了论坛寻找答案，但仍然无效。我在我的网站上使用CSS3 flexbox样式作为页脚。 HTML如下：

<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>Info@QuillTheatre.org<br>
                804.340.0115</p>
                <span>Social goes here</span>

            </div>
            <div id="box3" class="box">3</div>
            <!-- /copyright -->

</footer>

我的CSS如下......它有点脏了，我一直在尝试一堆东西上班：

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

这适用于除Safari之外的每个浏览器 - 不会发生包装。我在这里缺少什么不允许包装？

Answer 1

对于任何想知道的人：

我有太多的前缀可能会丢掉Safari的webkit。我能够通过使用适当的flexbox规则来解决这个问题（例如，使用flex作为速记而不是声明flex-grow或flex-shrink）并使用Autoprefixer来处理供应商前缀。

Answer 2

对于遇到类似问题的任何人。

我的带有内联列表的flex布局在Chrome上工作得很好但是包装在Safari上无效。

我在min-width: 25%上有一个li。删除后，它在Safari上正确显示。

Flexbox在Safari中仍然不稳定，flex-wrap无法正常工作

2 个答案: