Flex项目无法在Safari中正确堆叠 [英] Flex items not stacking properly in Safari
问题描述
我制作了一个flex布局，其中四个列/框并排坐在父div中。我添加了一个980px的媒体查询，增加了列的宽度，并添加了一个flex-wrap将两个右侧的列推到一个新的行，创建一个2 x 2风格的布局。
小提琴： https://jsfiddle.net/gjy1t16p/6/
如果您在Chrome中查看此文件并将窗口拖动到980像素以下，它将工作在我上面描述的方式。在Safari中，虽然我没有设法完全重现问题，箱子垂直堆叠。
正如我提到的，结果是不可预测的 - 网站，布局实际上更接近工作比在我做的小提琴。在网站上，2 x 2布局工作，但前提是第四个框没有文本/小部件。一旦它包含达到框全宽的内容，它会向下移动到左边，并且位于第三个框下方，正如我之前尝试添加的任何其他框。
如果任何人经历过这个bug，知道如何解决它，我会非常感激。
HTML：
< footer class =footer>
< div class =footer-container>
< div class =footer-columnid =column-1> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。
< / div>
< div class =footer-columnid =column-2> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。
< / div>
< div class =footer-columnid =column-3> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。
< / div>
< div class =footer-columnid =column-4> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。
< / div>
< / div>
< / footer>
CSS：
code> .footer {
height：auto;
width：100％;
background-color：#efefef;
display：-webkit-box;
display：-webkit-flex;
display：-ms-flexbox;
display：flex;
-webkit-box-orient：vertical;
-webkit-box-direction：normal;
-webkit-flex-direction：column;
-ms-flex-direction：column;
flex-direction：column;
-webkit-box-align：center;
-webkit-align-items：center;
-ms-flex-align：center;
align-items：center;
}
.footer-container {
width：85％;
height：inherit;
margin-top：60px;
overflow：hidden;
display：-webkit-box;
display：-webkit-flex;
display：-ms-flexbox;
display：
-webkit-box-pack：justify;
-webkit-justify-content：space-between;
-ms-flex-pack：justify;
justify-content：space-between;
}
.footer-column {
min-width：20％;
max-width：20％;
margin-bottom：40px;
}
＃column-1 {background-color：red}
＃column-2 {background-color：yellow}
＃column-3 {background- color：blue}
＃column-4 {background-color：green}
@media只有屏幕
和（min-width：0px）
和-width：980px）{
.footer-container {
-webkit-flex-wrap：wrap;
-ms-flex-wrap：wrap;
flex-wrap：wrap;
-webkit-box-orient：horizontal;
-webkit-box-direction：normal;
-webkit-flex-direction：row;
-ms-flex-direction：row;
flex-direction：row;
}
.footer-column {
margin-bottom：50px;
min-width：45％！important;
max-width：45％！important;
}
}
尝试替换您使用flex等效项的 min-width 和 max-width 声明。 >
而不是这样：
.footer-column {
min -width：20％;
max-width：20％;
margin-bottom：40px;
}
.footer-column {
min-width：45％！important;
max-width：45％！important;
margin-bottom：50px;
}
尝试：
.footer-column {
flex：0 0 20％;
margin-bottom：40px;
}
.footer-column {
flex：0 0 45％;
margin-bottom：50px;
}
I've made a flex layout in which four columns/boxes sit side-by-side within a parent div. I've added a media query at 980px that increases the width of the columns and adds a flex-wrap to push the two right hand columns onto a new row, creating a 2 x 2 style layout. This works in every browser except Safari, in which the results are very unpredictable.
Fiddle: https://jsfiddle.net/gjy1t16p/6/
If you view this in Chrome and drag the window below 980px, it will work in the way I've described above. In Safari however, although I've not managed to recreate the problem exactly, the boxes stack vertically instead.
As I mentioned, the results are unpredictable – when implemented on my website, the layout is actually closer to working than in the Fiddle I've made. On the website, the 2 x 2 layout works, but only if the fourth box has no text / widgets inside it. Once it contains content that reaches the full width of the box, it moves down to the left and sits underneath the third box, as happened to any other boxes I tried adding after it.
If anyone has experienced this bug before and knows how to solve it, I'd be really grateful. I've spent all day trying to fix it and I'm completely out of ideas.
HTML:
<footer class="footer">
<div class="footer-container">
<div class="footer-column" id="column-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="footer-column" id="column-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="footer-column" id="column-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="footer-column" id="column-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</footer>
CSS:
.footer {
height: auto;
width: 100%;
background-color: #efefef;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.footer-container {
width:85%;
height:inherit;
margin-top:60px;
overflow:hidden;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer-column {
min-width:20%;
max-width:20%;
margin-bottom:40px;
}
#column-1 {background-color:red}
#column-2 {background-color:yellow}
#column-3 {background-color:blue}
#column-4 {background-color:green}
@media only screen
and (min-width : 0px)
and (max-width : 980px) {
.footer-container {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.footer-column {
margin-bottom:50px;
min-width:45% !important;
max-width:45% !important;
}
}
Try replacing the min-width and max-width declarations you have with their flex equivalents.
Instead of this:
.footer-column {
min-width: 20%;
max-width: 20%;
margin-bottom: 40px;
}
.footer-column {
min-width: 45% !important;
max-width: 45% !important;
margin-bottom: 50px;
}
Try this:
.footer-column {
flex: 0 0 20%;
margin-bottom: 40px;
}
.footer-column {
flex: 0 0 45%;
margin-bottom: 50px;
}
这篇关于Flex项目无法在Safari中正确堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
