@ssumatokhin

В IE 11 Не работает display: flex в связке с magin: auto?

Друзья, проблема такая, есть картинка при клики на которою она открывается по середине на весь экран с затемненным фоном, в общем стандартная фишка. Я решил применить к основному блоку display: flex, а к блоку с картинкой magin: auto, работает везде, кроме IE 11 (((

<div class="big-photo">
  <div class="big-photo__box">
    <img class="big-photo__photo" src="http://placehold.it/900X468">
    <div class="big-photo__title">
      Название фото
    </div>
  </div>
</div>


.big-photo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    font-family: 'Open Sans',sans-serif;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

.big-photo__box {
    margin: auto;
}
  • Вопрос задан
  • 7600 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Kstl
Начинающий верстальшик
.big-photo{
justify-content: center;
align-items: center;
}

а вообще, вот css-live.ru/articles-css/shpargalka-po-shpargalke-...
Ответ написан
@devstudent
frontend-developer
caniuse.com/#search=flex
частичная поддержка flex в IE 11
Ответ написан
Комментировать
@fetis26
Ну, за фронтенд!
У ИЕ плохо маржины с флексбоксом работают. Я бы их с осторожностью использовал для центрирования. Лучше явное выравнивание
Ответ написан
Комментировать
@ssumatokhin Автор вопроса
Да, уже все методы попробовал и пришел к решению просто написать на JS
module.exports = () => {
  let photo = document.querySelector('.js-big-photo');
  if (!photo) return;
  photo.addEventListener('click', bigPhoto);

  function bigPhoto() {
    let photoTitle = document.querySelector('.js-big-photo-title').innerText;
    let photoSubtitle = document.querySelector('.js-big-photo-subtitle').innerText;
    let imgCrc = this.getAttribute('src');
    let mrgnRght = (window.innerWidth) - (document.body.offsetWidth);
    let bigPhotoBlock = document.createElement('div');

    bigPhotoBlock.className = 'big-photo';
    bigPhotoBlock.innerHTML = `<div class="big-photo__box">
                                <img class="big-photo__photo" src="${imgCrc}">
                                <div class="big-photo__title">
                                  ${photoTitle}
                                </div>
                                <div class="big-photo__subtitle">
                                  ${photoSubtitle}
                                </div>
                              </div>`;

    document.body.style.cssText = `overflow: hidden; margin-right: ${mrgnRght}px`;
    document.body.appendChild(bigPhotoBlock);

    let bgPhtHgth = document.querySelector('.big-photo');
    let boxPhoto =  bgPhtHgth.querySelector('.big-photo__box');
    let posTop = (bgPhtHgth.offsetHeight / 2) - (boxPhoto.offsetHeight / 2);
    let posLeft = (bgPhtHgth.offsetWidth / 2) - (boxPhoto.offsetWidth / 2);

    boxPhoto.style.cssText = `top: ${posTop}px; left: ${posLeft}px`;

    bigPhotoBlock.addEventListener('click', () => {
      bigPhotoBlock.parentNode.removeChild(bigPhotoBlock);
      document.body.style.cssText = ``;
    });
  }
};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы