text - 移动设备上的 Flexbox 文本对齐

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 图标，我只是不知道。有任何想法吗？

谢谢，
乔什

标签： textmobileflexboxiconsalignment