![wrap在Safari中不能正常工作]( "wrap在Safari中不能正常工作")
本文介绍了flex-wrap在Safari中不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
在的首页上，有两个弹出框模块，一个在Kundenstimmen下和一个在NeuesteBeiträge...。内部盒子应该在它们低于220px并且不超过30％宽度时包装。这在最新的Chrome，FF和Opera（所有在Mac上），但在Safari 8.0.5（Mac）和任何iOS浏览器的盒子从来没有形成一行，即使有足够的空间。
容器的CSS：
div class =snippetdata-lang =jsdata-hide =false> .homepage-testimonial-container {display：flex;显示：-webkit-flex; -webkit-flex：1; flex：1; -webkit-flex-direction：row; flex-direction：row; -webkit-flex-wrap：wrap; flex-wrap：wrap; -webkit-justify-content：space-between; justify-content：空格; -webkit-align-items：flex-start; align-items：flex-start; margin-top：1em;}
容器：
.homepage-testimonial {margin-bottom：1em; min-width：220px; max-width：30％; -webkit-flex：1 1 auto; flex：1 1 auto;}
如果禁用-webkit- flex-wrap（有效地将其设置为nowrap），所有框排成行，但是当浏览器窗口变得太窄时最终溢出容器。
解决方案
似乎这是Safari中的一个错误。在一个单独的问题，我测试使用最小宽度代替 auto 在您说的像 -webkit-flex：1 1 auto ; 。
此问题有一些信息：
On the homepage of http://www.shopifyexperte.de/ there are two flex-box modules, one under "Kundenstimmen" and one under "Neueste Beiträge...". The inner boxes are supposed to wrap when they go below 220px and not grow above 30% width. This works in latest Chrome, FF and Opera (all on Mac), but in Safari 8.0.5 (Mac) and any iOS browser the boxes never form a row even if there's enough room. They always wrap, each one on a row of its own.
The CSS for the container:
.homepage-testimonial-container {
display: flex;
display: -webkit-flex;
-webkit-flex: 1;
flex: 1;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
align-items: flex-start;
margin-top: 1em;
}
The CSS for the boxes inside the container:
.homepage-testimonial {
margin-bottom: 1em;
min-width: 220px;
max-width: 30%;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
If I disable -webkit-flex-wrap (effectively setting it to nowrap), all boxes line up in a row but eventually overflow the container when the browser window gets too narrow.
Is this some kind of bug in Safari/Webkit or am I doing something wrong here?
解决方案
It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.
This question has some info: http://stackoverflow.com/a/30792851/756329
这篇关于flex-wrap在Safari中不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..