Html 如何让 flex box 在 safari 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24899943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make flex box work in safari?
提问by akoito
How do I make flex boxes work in Safari? I have a responsive nav that uses a CSS flex box to be responsive and for some reason it won't work in Safari.
如何让 Flex 框在 Safari 中工作？我有一个响应式导航，它使用 CSS 弹性框进行响应，但由于某种原因它在 Safari 中不起作用。
Here is my code:
这是我的代码：
#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;fffff
font-style: normal;
font-weight: 400px;
}
#menu a:link {
display: inline-block;
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:visited {
display: inline-block;
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:hover {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
padding: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
}
#menu a:active {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
}<nav id="menu">
<a href="#">Philadelphia</a>
<!--<a href="#">Vacation Packages</a>-->
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>http://jsfiddle.net/cyberjo50/n55xh/3/
http://jsfiddle.net/cyberjo50/n55xh/3/
Is there a prefix I'm missing to make it work in Safari?
是否缺少前缀使其在 Safari 中工作？
回答by tslater
I had to add the webkit prefix for safari (but flexnot flexbox):
我必须为 safari 添加 webkit 前缀（但flex不是flexbox）：
display:-webkit-flex
display:-webkit-flex
回答by Anisha
Just tRy this
试试这个
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
this worked for me
这对我有用
回答by Friend
Try this:
尝试这个：
select {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -ms-flexbox;
}
回答by huseyin39
Giving flex a value solved the problem for me, e.g.
给 flex 一个值解决了我的问题，例如
flex: 1 0 auto
回答by Pranab
Just try -webkit-flexbox. it's working for safari.
webkit-flexsafari will not taking.
试试吧-webkit-flexbox。它适用于野生动物园。
webkit-flexsafari 不会带。
回答by J. Unkrass
display: flex;
display: -webkit-box;
did it for me. Also there were two display: flex;on the same element from different classes. So I removed the other one.
为我做的。还有两个display: flex;来自不同类的同一个元素。所以我删除了另一个。
回答by Michael Poppinger
It works when you set the display value of your menu items from display: inline-block;to display: block;
当您将菜单项的显示值设置为从display: inline-block;到display: block;
See your updated code here:
在此处查看更新的代码：
#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;fffff
font-style: normal;
font-weight: 400px;
}
#menu a:link {
display: block; //here you need to change the display property
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:visited {
//no display property here
width: 100px;
height: 50px;
padding: 5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
}
#menu a:hover {
//no display property here
color: #fff;
width: 100px;
height: 50px;
padding: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
}
#menu a:active {
//no display property here
color: #fff;
width: 100px;
height: 50px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin: 5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
}
回答by Nikit Barochiya
Demo -> https://jsfiddle.net/xdsuozxf/
演示 -> https://jsfiddle.net/xdsuozxf/
Safari still requires the -webkit-prefix to use flexbox.
Safari 仍然需要-webkit-前缀才能使用 flexbox。
.row{
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
background:red;
border:1px solid black;
-webkit-flex: 1 ;-ms-flex: 1 ;flex: 1 ;
}<div class="wrapper">
<div class="content">
<div class="row">
<div class="col medium">
<div class="box">
work on safari browser
</div>
</div>
<div class="col medium">
<div class="box">
work on safari browser
work on safari browser
work on safari browser
work on safari browser
work on safari browser
</div>
</div>
<div class="col medium">
<div class="box">
work on safari browser
work on safari browser
work on safari browser
work on safari browser
work on safari browser
work on safari browser work on safari browser
work on safari browser
</div>
</div>
</div>
</div>
</div>回答by Soko?ow
Maybe this would be useful
也许这会很有用
-webkit-justify-content: space-around;
