作者：z1996y | 来源：互联网 | 2023-05-17 09:52
我有以下Flexbox代码,它在Chrome和Firefox中运行良好,但在Safari(任何版本)中都没有效果.我尝试过特定的前缀但无法实现相同的简单顺序.我应该为Safari修改/添加什么,以便它能像Chrome和Firefox一样正常工作？
的jsfiddle
.container {
display: -webkit-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
flex-direction: row;
-webkit-flex-direction: row;
list-style:none;
}
li {
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
-webkit-flex-grow: 3;
flex-grow: 3;
}
- Alabama
- California
- Florida
- Idaho
- Kansas
- Nevada
- New York
1> JoJo..：
Safari 5(Safari的最新Windows版本)仅支持具有旧语法和-webkit-前缀的flexbox.(display:-webkit-box)
http://caniuse.com/#search=flexbox
.container {
display: -webkit-box; /*safari*/
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap; /* Safari 6.1+ */
justify-content: space-around;
flex-direction: row;
-webkit-flex-direction: row;
list-style:none;
}
li {
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
flex-grow: 3;
}
- Alabama
- California
- Florida
- Idaho
- Kansas
- Nevada
- New York
京公网安备 11010802041100号