Блог

Главная - Вопросы по программированию - Выравнивание текста Flexbox на мобильных устройствах

Выравнивание текста Flexbox на мобильных устройствах

text #mobile #flexbox #icons #alignment

#текст #Мобильный #flexbox #Значки #выравнивание

Вопрос:

Итак, я использую flexbox для некоторых столбцов. В основном столбец 1 выровнен по левому краю, второй столбец по центру, а третий столбец выровнен по правому краю. Ничего особенного, или я так думал. В Chrome все выглядит нормально, даже если смотреть на вещи с помощью инструмента проверки Chrome … но на моем 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? Может быть, это потому, что у меня есть потрясающие значки шрифтов перед текстом, я просто не знаю. Есть идеи?

Спасибо,
Джош

Комментарии:

1. Я только что подтвердил это, если я удалю #nav > .wrap > div:nth-child(1) и #nav > .wrap > div:nth-child(3) , но оставлю #nav > .wrap > div:nth-child(3) p все по-прежнему работает как на настольных компьютерах, так и на мобильных устройствах … но это означает, что теперь он работает без justify-content того, что просто не работает на мобильных устройствах?

2. Пожалуйста, поделитесь изображением вывода, который вы ожидаете на мобильных устройствах. Кроме того, #nav div это кажется неправильным. Это означает, что все дочерние элементы .wrap также являются flexboxes, которые вам, вероятно, не нужны? Вы можете сделать только .wrap div гибким и выровнять содержимое внутри его гибких элементов с помощью text-align .

3. Это на самом деле на моем тестовом сайте прямо сейчас: joshrodg.com/splash , это тот, к которому я добавил дополнительный код сегодня утром 🙂

4. @veesar да, это верно, каждый div сгибается, потому что я использую align-items, чтобы содержимое каждого столбца или каждого div в моем обертывании выравнивалось по вертикали посередине.

Метки: