Flex 项目无法在 Safari 中正确堆叠 [英] Flex items not stacking properly in Safari

查看：15
本文介绍了Flex 项目无法在 Safari 中正确堆叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我制作了一个 flex 布局，其中四个列/框并排放置在父 div 中.我在 980 像素处添加了一个媒体查询，它增加了列的宽度，并添加了一个 flex-wrap 以将两个右手列推到一个新行上，创建一个 2 x 2 样式布局.这适用于除 Safari 之外的所有浏览器，其中结果非常难以预测.

小提琴:https://jsfiddle.net/gjy1t16p/6/

如果您在 Chrome 中查看并将窗口拖动到 980 像素以下，它将按照我上面描述的方式工作.然而，在 Safari 中，虽然我没有设法准确地重现这个问题，但这些盒子是垂直堆叠的.

正如我所提到的，结果是不可预测的——当在我的网站上实施时，布局实际上比我制作的 Fiddle 更接近工作.在网站上，2 x 2 布局有效，但前提是第四个框内没有文本/小部件.一旦它包含的内容达到框的整个宽度，它就会向左移动并位于第三个框的下方，就像我尝试在它之后添加的任何其他框一样.

如果有人以前遇到过这个错误并且知道如何解决它，我将不胜感激.我花了一整天的时间试图修复它，但我完全没有想法.

HTML:

<div class="footer-container"><div class="footer-column" id="column-1">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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 class="footer-column" id="column-2">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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 class="footer-column" id="column-3">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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 class="footer-column" id="column-4">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.

</页脚>

CSS:

.footer {高度:自动；宽度:100%；背景颜色:#efefef；显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox;显示:弹性；-webkit-box-orient:垂直；-webkit-box-direction:正常；-webkit-flex-direction: 列；-ms-flex-direction: 列；弹性方向:列；-webkit-box-align:居中；-webkit-align-items:居中；-ms-flex-align:居中；对齐项目:居中；}.footer-container {宽度:85%；高度:继承；边距顶部:60px;溢出:隐藏；显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox;显示:弹性；-webkit-box-pack:证明；-webkit-justify-content:间隔；-ms-flex-pack:证明；对齐内容:间隔；}.footer-column {最小宽度:20%；最大宽度:20%；底边距:40px；}#column-1 {背景色:红色}#column-2 {背景色:黄色}#column-3 {背景色:蓝色}#column-4 {背景色:绿色}@media 仅屏幕和(最小宽度:0px)和(最大宽度:980px){.footer-container {-webkit-flex-wrap:包裹；-ms-flex-wrap:包裹；flex-wrap: 包裹;-webkit-box-orient:水平；-webkit-box-direction:正常；-webkit-flex-direction: 行；-ms-flex-direction:行；弹性方向:行；}.footer-column {底边距:50px；最小宽度:45%！重要；最大宽度:45%！重要；}}

解决方案

尝试用 flex 替换你的 min-width 和 max-width 声明 等价物.

取而代之的是:

.footer-column {最小宽度:20%；最大宽度:20%；底边距:40px；}.footer-column {最小宽度:45%！重要；最大宽度:45%！重要；底边距:50px；}

试试这个:

.footer-column {弹性:0 0 20%；底边距:40px；}.footer-column {弹性:0 0 45%；底边距: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;
}

Revised Demo

这篇关于Flex 项目无法在 Safari 中正确堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆