Flex с дисплеем justify-content выровнен по нескольким браузерам, таким как IE и мобильный Safari - PullRequest
Новая
       46

Flex с дисплеем justify-content выровнен по нескольким браузерам, таким как IE и мобильный Safari

0 голосов
/ 13 сентября 2018

URL для просмотра сайта HTML и CSS с исправленными / неработающими проблемами с выравниванием: http://jimmiheiserman.com/bannerDev/crossTest/

Я создаю несоответствующий эффект наслоения кирпичной кладки с элементами div разного размера, центрирую их с помощью flex, а затем полностью смещая ихвлево или вправо, чтобы получить их все на свои места.Кажется, он отлично работает в хороших браузерах (Chrome, FF, Edge, Safari 11, Chrome mobile, даже iOS 8 / Safari 11. Но в сломанных браузерах каждый div кажется привязанным к верхнему левому углу, а не к центру).-прибирается с макетом Flex. Затем, когда я настраиваюсь с левой стороны: -100px или что-то, они немного отключены; хуже для более широких divs.

Я приложил несколько скриншотов, чтобы показать, как это должно выглядеть,и как это выглядит в некоторых из этих неработающих состояний. Я читал о том, что у флекс-макета есть проблемы в <= IE11, но это также проявляется и в <= iPhone7, а также в некоторых старых мобильных устройствах Android. </p>

Какмакет корректно выглядит во многих современных браузерах. successful layout

Сломанная, не выровненная версия в IE11 и менее (и очень старые версии chrome и FF, но я не против этого). broken layout

Неисправный макет в iOS Safari 10 и ниже. broken layout

Возможно, есть чистое исправление, или, может быть, потребуется тонна переписать, я не знаю. Это демоИскусство более детализированного проекта, поэтому я надеюсь, что здесь будет более простое исправление, естественно, ха.

Я также сделал Codepen, но codepen иногда просто показывает сообщение о том, что браузер IE11 не поддерживается, поэтомуэто не так просто проверить на совместимость, но и здесь: https://codepen.io/jimmi_heiserman/pen/ZMoexQ?editors=1111 Может потребоваться просмотр в других браузерах, использующих / full / вместо / pen / HTML здесь: 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=920, user-scalable=yes" />
</head>

<body>
  <div id="all-banners">
    <div id="banner-edge-1" class="banner-container"></div>
    <div id="banner-edge-2" class="banner-container"></div>
    <div id="banner-edge-3" class="banner-container"></div>
    <div id="banner-edge-4" class="banner-container"></div>
    <div id="banner-edge-5" class="banner-container"></div>
    <div id="banner-edge-6" class="banner-container"></div>
    <div id="banner-edge-7" class="banner-container"></div>
    <div id="banner-edge-8" class="banner-container"></div>
    <div id="banner-1" class="banner-container banner-primary"></div>
    <div id="banner-2" class="banner-container banner-primary"></div>
    <div id="banner-3" class="banner-container banner-primary"></div>
    <div id="banner-4" class="banner-container banner-primary"></div>
    <div id="banner-5" class="banner-container banner-primary"></div>
    <div id="banner-6" class="banner-container banner-primary"></div>
    <div id="banner-7" class="banner-container banner-primary"></div>
    <div id="banner-8" class="banner-container banner-primary"></div>
    <div id="banner-9" class="banner-container banner-primary"></div>
  </div>
</body>
</html>

и CSS: 

html, body {
  background: radial-gradient(circle, #fafafa, #444444);
  margin: auto;
  height: 100%;  
  overflow: hidden;
}

#all-banners {
  display: flex;
  justify-content: center;
}

.banner-container {
  border-style: solid;
  border-color: black;
  border-radius: 10px;
  border-width: 1px;
  background-color: lavender;
  position: absolute;
  overflow: hidden;
}

.banner-primary {
  background-color: #ffcccc;
}

#banner-1 {
  width: 160px;
  height: 800px;
  transform:translate(-350px, 60px);
}

#banner-2 {
  width: 120px;
  height: 600px;
  transform:translate(-200px, 60px);
}

#banner-3 {
  width: 560px;
  height: 90px;
  transform:translate(150px, 60px);
}

#banner-4 {
  width: 400px;
  height: 300px;
  transform:translate(70px, 160px);
}

#banner-5 {
  width: 150px;
  height: 70px;
  transform:translate(355px, 160px);
}

#banner-6 {
  width: 150px;
  height: 620px;
  transform:translate(355px, 240px);
}

#banner-7 {
  width: 190px;
  height: 190px;
  transform:translate(-35px, 470px);
}

#banner-8 {
  width: 200px;
  height: 390px;
  transform:translate(170px, 470px);
}

#banner-9 {
  width: 320px;
  height: 190px;
  transform:translate(-100px, 670px);
}

#banner-edge-1 {
  width: 1000px;
  height: 200px;
  transform: translate(-700px, -150px);
}

#banner-edge-2 {
  width: 620px;
  height: 100px;
  transform: translate(120px, -50px);
}

#banner-edge-3 {
  width: 1000px;
  height: 400px;
  transform: translate(940px, -50px);
}

#banner-edge-4 {
  width: 1000px;
  height: 500px;
  transform: translate(940px, 360px);
}

#banner-edge-5 {
  width: 1000px;
  height: 1200px;
  transform: translate(650px, 870px);
}

#banner-edge-6 {
  width: 570px;
  height: 1200px;
  transform: translate(-145px, 870px);
}

#banner-edge-7 {
  width: 1000px;
  height: 1400px;
  transform: translate(-940px, 560px);
}

#banner-edge-8 {
  width: 1000px;
  height: 490px;
  transform: translate(-940px, 60px);
}
...