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 上无法运行。
我在li
s 上有一个min-width: 25%
。
一旦我删除它在 Safari 上正确显示。
【讨论】:
以上是关于Flexbox 在 Safari 中仍然参差不齐,flex-wrap 不起作用的主要内容,如果未能解决你的问题,请参考以下文章