Flexbox 在 Safari 中仍然参差不齐,flex-wrap 不起作用

Posted

技术标签:

【中文标题】Flexbox 在 Safari 中仍然参差不齐,flex-wrap 不起作用【英文标题】:Flexbox still being spotty in Safari, flex-wrap not working 【发布时间】:2015-07-07 12:01:49 【问题描述】:

我已经阅读了论坛寻找答案,但仍然没有任何效果。我在我的网站上使用 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 如下......它有点脏 bc 我一直在尝试一堆东西来工作:

.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 之外的所有浏览器上都可以正常工作 - 不会发生换行。我在这里错过了什么不允许包装?

【问题讨论】:

哪个版本的 Safari? 最新版本,8.0.4。我已经调整了我的前缀,我把所有东西都推到了一行,但在 Safari 上仍然没有发生换行。 我不希望它在这里有所作为,因为 Safari 仍被列为需要前缀,但您的无前缀属性应该是最后的。指定 flex-direction、flex-wrap 和 flex-flow 也是多余的。 遇到同样的问题 【参考方案1】:

仅供任何想知道的人使用:

我可能有太多的前缀正在抛出 Safari 的 webkit。我能够通过使用适当的 flexbox 规则(例如,使用 flex 作为简写而不声明 flex-grow 或 flex-shrink)并使用 Autoprefixer 来处理供应商前缀来解决这个问题。

【讨论】:

【参考方案2】:

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

我的带有内联列表的 flex 布局在 Chrome 上运行良好,但换行在 Safari 上无法运行。

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

【讨论】:

以上是关于Flexbox 在 Safari 中仍然参差不齐,flex-wrap 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox子项在Safari中崩溃[重复]

在 Safari 中破坏大小图像的 Flexbox

Flexbox 子项在 Safari 中超出其高度

Flexbox 子项在 Safari 中呈现错误

Flexbox 中心在 Safari 中不起作用

flexbox 在 Safari 中添加 1px 左边距