Вопрос

    John106    1
    John106

    Столкнулся с такой проблемой что при уменьшении окна браузера flex-элементы не хотят выстраиваться в один столбец. В песочнице все работает отлично, а когда делаю у себя на компьютере, то не работает. Код один и тот же пишу. На скриншотах все видно.

    Код в песочнице

    Скриншот 1

    Скриншот 2

    Проверял в Firefox все работает, а в Chrome нет... Понять не могу почему, хотя как делал примеры все работало, а когда начал сам делать не работает. (это я про то что в хроме не работает)

    Изменено пользователем John106

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    5 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    Igor Schnaider    162
    Igor Schnaider

    Похоже, что meta viewport нет. Но все равно, по сетке у вас выравнивания не получиться. Или вы про другое, может я вопрос неправильно понял.

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    John106    1
    John106

    Что никто не знает как исправить эту проблему?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor Schnaider    162
    Igor Schnaider

    Если я правильно понял, вам нужно, чтобы колонки тянулись, но при этом были не меньше определенной ширины и не выходили из сетки.

    Средствами CSS с флэксами не получиться. (Ну только если нагородить в разметке лишних элементов в качестве заполнителей с нулевой высотой, но это не решение, конечно.)

    Я бы JS использовал.

    И еще, не знаю, но может на гридах такое возможно?..

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    John106    1
    John106
    33 минуты назад, Igor Schnaider сказал:

    Если я правильно понял, вам нужно, чтобы колонки тянулись, но при этом были не меньше определенной ширины и не выходили из сетки.

    Средствами CSS с флэксами не получиться. (Ну только если нагородить в разметке лишних элементов в качестве заполнителей с нулевой высотой, но это не решение, конечно.)

    Я бы JS использовал.

    И еще, не знаю, но может на гридах такое возможно?..

    Вот как работает этот код который в песочнице в браузере Firefox: Скриншот 1 Скриншот 2

    А в браузере Chrome не работает: Скриншот 1 Скриншот 2, хотя когда я делал примеры по верстке Flexbox все в Chrome работало, а когда начал сам делать уже нет. Тут должно без JS работать.

    Должны на мобильных экранах все эти элементы быть друг над другом, еще раз повторюсь что в Chrome в режиме адаптива не работает, а в Firefox в этом режиме работает.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    John106    1
    John106
    10 минут назад, Igor Schnaider сказал:

    Похоже, что meta viewport нет. Но все равно, по сетке у вас выравнивания не получиться. Или вы про другое, может я вопрос неправильно понял.

    Да, действительно это не работало потому что я не указал meta viewport (как-то из головы выпало). Теперь все работает как и хотел. Спасибо за отклик.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google