web-dev-qa-db-ja.com

サファリでフレックスボックスを機能させるにはどうすればよいですか？

Safariでフレックスボックスを機能させるにはどうすればよいですか？レスポンシブにするためにCSSフレックスボックスを使用するレスポンシブナビゲーションがあり、何らかの理由でSafariで機能しません。

ここに私のコードがあります：

#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/

Safariで機能させるために欠落しているプレフィックスはありますか？

htmlcsssafariflexbox
33
akoito

サファリのwebkitプレフィックスを追加する必要がありました（ただし、flexではなくflexbox）：

display:-webkit-flex

20
tslater

ちょうどこれを試してください

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 */

これは私のために働いた

5
Anisha

これを試して：

select {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -ms-flexbox;
}
5
Friend

ちょうど試して -webkit-flexbox。それはサファリのために働いています。 webkit-flexサファリは服用しません。

2
Pranab

メニュー項目の表示値をdisplay: inline-block;からdisplay: block;に設定すると機能します

ここで更新されたコードを参照してください。

#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%;
}
0
Michael Poppinger

たぶんこれは便利でしょう

-webkit-justify-content: space-around;
0
Sokołow

デモ-> https://jsfiddle.net/xdsuozxf/

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>
0
Nikit Barochiya
display: flex;
display: -webkit-box;

私のためにやった。また、2つのdisplay: flex;異なるクラスの同じ要素上。だから私は他のものを削除しました。

0
J. Unkrass