Flexbox 文字 alignment 在移動設備上

Question

所以，我在某些列中使用 flexbox。 基本上第 1 列左對齊，第 2 列居中，第 3 列右對齊。 沒什么大不了的，至少我是這么想的。 在 Chrome 中，一切看起來都很好，即使通過 Chrome 的 Inspect 工具查看內容......但在我的 iPhone 上，我無法獲得正確的列來justify-content 。

我的代碼如下所示：

<div id="nav">
    <div class="wrap">
        <div>
            <p><i class="far fa-dot-circle"></i> <a href="">Watch</a></p>
        </div>
        <div>
            <p><a href=""><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" title="" /></a></p>
        </div>
        <div>
            <p><i class="fas fa-donate"></i> <a href="">Give</a></p>
        </div>
    </div>
</div>

css 看起來像：

#nav div {
    align-items: center;
    display: flex;
    flex: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 18px;
    padding: 10px 20px 0;
    text-transform: uppercase;
}

#nav > .wrap > div:nth-child(1) {
    background: #00ff00;
    justify-content: left;
}

#nav > .wrap > div:nth-child(2) {
    background: #ff0000;
    justify-content: center;
}

#nav > .wrap > div:nth-child(3) {
    background: #0000ff;
    justify-content: right;
}

#nav img {
    max-width: 175px;
    width: 100%;
}

#nav i {
    color: #fff;
    margin-right: 5px;
}

#nav a {
    color: #fff;
    text-decoration: none;
}

這是小提琴： https://jsfiddle.net/1kw5g3h7/

我今天早上添加了以下代碼，這有效：

#nav > .wrap > div:nth-child(3) p {
text-align: right;
width: 100%;

}

我不喜歡這種方法，在我看來justify-content不起作用有沒有辦法使用 flexbox 來解決這個問題？ 我試圖了解為什么我的原始代碼無法在我的 iPhone 上運行？ 也許是因為我在文本前面有 Font Awesome 圖標，我只是不知道。 有任何想法嗎？

謝謝，
喬什

Answer 1

直到現在我才意識到我從未發布過我的最終代碼。 這就是我最終得到的結果： https://jsfiddle.net/tc36e24s/2/

HTML：

<div id="head">
     <div id="nav">
         <a href="javascript:void(0)" onclick="closeNav()" class="close"><i class="ion-android-close"></i></a>
         <ul>
             <li><a href="">Watch</a></li>
             <li><a href="">Give</a></li>
             <li><a href=""><img src="images/logo.png" alt="Logo" title="Logo" /></a></li>
             <li><a href="">Visitors</a></li>
             <li><a href="">Contact</a></li>
         </ul>
     </div>
        
    <div id="logo">
        <p><a href=""><img src="images/logo.png" alt="Logo" title="Logo" /></a></p>
            
        <div onclick="openNav()" class="open">
            <i class="ion-android-menu"></i>
        </div>
    </div>
</div>

CSS

body {
    background: #009151;
}

#head {
    display: flex;
    flex-flow: column;
    height: 100vh;
}

#nav ul {
    flex: 0 1 auto;
}

#nav ul img {
    max-width: 175px;
    width: 100%;
}

#nav ul i {
    color: #9ac2e7;
    margin-right: 5px;
}

#nav li {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 2px;
    line-height: 18px;
    padding: 10px 20px 0;
    text-align: center;
    text-transform: uppercase;
}

#logo {
    display: flex;
}

#logo img {
    max-width: 200px;
    margin: 20px 30px;
    width: 100%;
}

@media screen and (max-width: 800px) {
    #head .open {
        color: #9ac2e7;
        font-size: 30px;
        margin: 20px 30px;
        text-align: right;
        width: 100%;
    }
    #head .open:hover {
        cursor: pointer;
    }
    #nav {
        background: #9ac2e7;
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }
    #nav ul {
        align-items: center;
        display: flex;
        flex-flow: column;
        height: 100%;
        justify-content: center;
        width: 100%;
    }
    #nav ul a {
        color: #000;
        text-decoration: none;
    }
    #nav li {
        font-size: 20px;
        padding: 10px 0;
    }
    #nav li:nth-child(3) {
        display: none;
    }
    #nav .close {
        color: #000;
        font-size: 30px;
        position: absolute;
        right: 30px;
        top: 20px;
    }
}

@media screen and (min-width: 801px) {
    #nav .close {
        display: none;
    }
    #nav[style] {
        display: block !important;
    }
    #nav ul {
        align-items: center;
        display: flex;
    }
    #nav ul a {
        color: #9ac2e7;
        text-decoration: none;
    }
    #nav li {
        flex: 1;
        font-size: 14px;
    }
    #logo {
        display: none;
    }
}

JS

function openNav() {
    document.body.style.overflow="hidden";
    document.getElementById("nav").style.display = "block";
}

function closeNav() {
    document.body.style.overflow="scroll";
    document.getElementById("nav").style.display = "none";
}

我添加了一些 JS 以使我的菜單在移動設備上工作，但除此之外，這是我使用的代碼……除了我添加了兩個額外的鏈接（徽標的每一側一個）之外，這與以前幾乎相同。

謝謝，
喬什