1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

Проблемы с FlexBox

Тема в разделе "Web Coding", создана пользователем 01K, 10 апр 2018.

Модераторы: latteo
  1. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    421
    Симпатии:
    66
    Всем привет!
    Есть проблема с flexbox'ами.
    Сайт:

    footer. Что при просмотре на мобилке, что на десктопе - уменьшая окно, нижний колонтитул "подъедается". Chrome Desktop - всё хорошо. Chrome Mobile, Firefox и Firefox Mobile - беда.
    Страница сделана с помощью React.js и возможно, некоторые inline стили слайдов не срабатывают.

    Буду благодарен за дельные решения
     
    Последнее редактирование: 11 апр 2018
  2. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    156
    Симпатии:
    104
    пару скроллов мышью, и ты в глубоком трансе )

    В последнем слайде нужно сделать флексбокс вертикальным
    и выровнять его по последнему дочернему элементу.
    Так:

    .last-slide {
    flex-flow: column;
    justify-content: end;
    }

    P.s. Да, и поскольку флексбокс становится вертикальным, нужно поменять выравнивание футера по горизонтали.

    Убрать align-self отсюда
    .last-slide footer {
    align-self: flex-end;
    }

    Или сделать так:
    .last-slide footer {
    align-self: auto;
    }

    Иначе футер не будет выравниваться по центру
     
    Последнее редактирование: 15 апр 2018
    01K нравится это.
  3. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    421
    Симпатии:
    66
    Спасибо милый человек!
    Только сейчас появился немного другой косяк, последний слайд влазит на предпоследний, в том же "мобильном" режиме. Через Responsive Design Mode это хорошо видно.
    Что там я пропустил :) ?
    + в IE что-то не то с последним слайдом...
    P.S. что-то всё вернулось на круги своя... :D
     
    Последнее редактирование: 15 апр 2018
  4. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    156
    Симпатии:
    104
    flexbox неодинаково работает в браузерах,
    собенно в старых,
    особенно в safary
    и особенно когда комбинируешь горизонтальный и вертикальный грид
    в общем, когда флексбокс внутри флексбокса, не удивляйся сюрпризам в старых браузерах

    если уж совсем никак без слайдов, используй старое доброе проверенное, без флексбокса
    http://johnpolacek.github.io/superscrollorama/

    или вникай во флексбокс
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     
    01K нравится это.
  5. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    421
    Симпатии:
    66
    Из старья я только на 11 IE рассчитывал... Но он хреноваст оказался :)
    Кажется, сейчас всё более менее
    Спасибо!