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

Проблемы с FlexBox

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

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

    01K

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

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

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

    alex_me

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

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

    .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
    Сообщения:
    446
    Симпатии:
    73
    Спасибо милый человек!
    Только сейчас появился немного другой косяк, последний слайд влазит на предпоследний, в том же "мобильном" режиме. Через Responsive Design Mode это хорошо видно.
    Что там я пропустил :) ?
    + в IE что-то не то с последним слайдом...
    P.S. что-то всё вернулось на круги своя... :D
     
    Последнее редактирование: 15 апр 2018
  4. alex_me

    alex_me

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

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

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

    01K

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

    xLuckyx Создатель

    Регистр.:
    13 ноя 2008
    Сообщения:
    35
    Симпатии:
    9
    Вы хреновастых браузеров еще не видели и те времена когда верстали под 6 осла.... Так что не зарекайтесь, 11 осел нормальный браузер.))
    01K, я правильно понимаю, вам делал сайт тот, на кого у вас стоит ссылка в подвале кузма.лт?:facepalm:
     
    Последнее редактирование: 14 май 2018
  7. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    446
    Симпатии:
    73
    xLuckyx,
    Твоё предыдущее сообщение удалил я. Так что можешь пуп не драть.
    Получил ли я деньги – это тебя совершенно не касается.
    На форуме я просил о помощи по поводу вёрстки с flexbox, о чём мне выше и подсказали. А не о инфантильных возгласах, личных впечатлениях и характеристиках лэндинга...
    Так что спи спокойно, дорогой товарищ.
    Adiós!
     
  8. xLuckyx

    xLuckyx Создатель

    Регистр.:
    13 ноя 2008
    Сообщения:
    35
    Симпатии:
    9
    Ну так а зачем ты удаляешь сообщения? Или когда тебе что-то не нравится или не по твоему, ты прячешь голову в песок и заметаешь следы? Это форум, каждый высказывает мнение! Тебе и было сказано что твой код кривой, при чем очень. То как у тебя там применяются стили в html прямо в тегах, при чем к этим же тегам зачем то присвоены class="nameclass".... И эти position:absolute; height в каждом диве.... Если у тебя абсолютное позиционирование элементов, на кой черт ты там флексы применяешь? И ты еще удивляешься почему у тебя проблемы в ие.:facepalm:
     
  9. iqwinsa

    iqwinsa Создатель

    Регистр.:
    10 янв 2018
    Сообщения:
    11
    Симпатии:
    0
    IE11 и Edge связаны между собой, интересно просто насколько верстка под них актуальна и надо ли изобретать велосипед, в любом случае процент пользователей, которые пользуются этими браузерами очень мизерный.