В IE 11 не срабатывают margin top, bottom на flex-box?

Question

[Senseich]

Всем привет, господа! Помогите разобраться, никак не пойму почему не срабатывает в IE11 margin'ы , хотя в других браузерах норм. Я с флексами недавно стал знакомиться, поэтому возможно где то я накасячил.

Сам сайт: blogoi.ru/test

Собственно, пару моментов:
1)
Как должно быть в начале
Как в IE11


2)
Как должно быть в футере
Как в IE11

По возможности, не предлагать пути решения, они у меня есть ) , мне охота понять почему сейчас не работает, спс.

Answer 1

[Ankhena]

Потому что явно не задана высота.

Comments

[Ankhena]

Шепотом: ваш код это тихий ужас

[Senseich]

Ankhena,

Шепотом: ваш код это тихий ужас

что именно? ) вобще это не мой код, но мне интересно мнение специалиста.
Я просто переделывал шаблон, чтобы познакомиться с флексами: https://startbootstrap.com/template-overviews/creative/

[Senseich]

Ankhena, хочу конструктивную критику по этому коду ) тут кода "раз, два обчёлся", минимум, что html, что css. Почти все элементы повторяются, что вам не понравилось )) Просто хочу для себя знать.

[Ankhena]

Senseich,
В общем:
1. important
2. куча переопределений свойств
3. лишние обертки

В вашем проблемном месте: margin auto вместо свойств флексов, раз уж флекс все равно используется.

и тому подобное

[Senseich]

Ankhena, ну импотанты в основном от бутстрапа, вроде никто ни жалуется на него, куча переопределений и лишние обертки - можно пример в коде, если не сложно?
По поводу margin auto, в IE нужно всегда явно высоту и ширину задавать?

[Ankhena]

Senseich,

ну импотанты в основном от бутстрапа, вроде никто ни жалуется на него

не буду комментировать

По поводу margin auto, в IE нужно всегда явно высоту и ширину задавать?

Вообще всюду надо, только некоторые браузеры догадываются что вам нужно.
Если родитель flex, то логичнее использовать align-items.

можно пример в коде

Можно.
1.

<div class="container my-auto">
<div class="row">

Один из них лишний. Да, я понимаю, что это бутстрапа радости на которые "никто не жалуется".

2. hr лишний

3. <h1><strong></strong></h1> strong лишний

4. <br> внутри strong'а тоже лишний

5. <div class="col-lg-8 mx-auto"> тоже сомнительной нужности.

[Senseich]

ну импотанты в основном от бутстрапа, вроде никто ни жалуется на него
не буду комментировать

Я это не с сарказмом написал, мне реально интересно почему где много импотентов? Мне важно мнение опытных людей.
А почему один из них лишний, вроде по методике бутстрапа так надо?

<div class="container my-auto">
<div class="row">

[Ankhena]

Senseich,

вроде по методике бутстрапа так надо?

Да ради бога, никто не мешает вам использовать бутстрап, если нравится )))

Я не всю статью поддерживаю, но прочитать имеет смысл: https://csswizardry.com/2012/11/code-smells-in-css/