Позиционирование элементов CSS (flex)

Question

Ребят, помогите, пожалуйста. Вот у меня есть блок с элементами (отмеченные галочкой будут совершать движение с помощью js - совсем небольшое, цикличное, постоянное), другие 2 элемента не будут двигаться. Но как их разумно спозиционировать?? Схема, конечно, приблизительная)

Я попыталась сделать через flex, но код выходит ужасным (если писать через top, left, итд) + ко всему мне нужно это сделать адаптированным под ipad (1024x768), но когда я меняю все размеры - овсе съезжает, соответственно(((

Код прилагаю, но он неправильный - только для примера именно с использованием left и как это все некрасиво выглядит)

Верю, что есть красивое решение этого вопроса - прошу направить меня, спасибо!)

.main {
  display: flex;
  /* width: 100%; */
position: relative;
}

main > img {
position: absolute
}

.main-image__fourth {
  height: 231px;
}
.main-image__first {
  width: 125px;


}
.main-image__third {
  width: 221px;
}

.main-image__fifth {
    width: 257px;
    height: 85px;
    left: -594px;
    top: 503px;
}

.main-image__sixth {
  width: 1183px;
  height: 239px;
      left: -75px;
    top: 53px;
}

 <div class="main">
             <img class="main-image__fourth" src="/src/img/4.png" alt="">
            <img class="main-image__first" src="/src/img/1.png" alt="">
            <img class="main-image__third" src="/src/img/3.png" alt="">
            <img class="main-image__fifth" src="/src/img/5.png" alt="">
            <img class="main-image__sixth" src="/src/img/6.png" alt="">
          
          </div>

Answer 1

Большей частью зависит все-таки от макета, что это, какие функции, и как будет анимировано. В общем случае, наверное, анимировать подойдет через JS и тогда, возможно позиционирование через position: absolute будет нормально.

Чтобы не съезжало при изменении размеров, используйте относительные единицы, например, тут в примере проценты везде.

@keyframes vertical {
  0% {transform: translateY(20%)}
  100% {transform: translateY(-20%)}
}

@keyframes horizontal {
  0% {transform: translateX(20%)}
  100% {transform: translateX(-20%)}
}

@keyframes diagonal {
  0% {transform: translate(30%, 30%)}
  100% {transform: translate(-30%, -30%)}
}


.blocks {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 50%;
  aspect-ratio: 1;
  background-color: #ccc;
  position: relative;
}

.block {
  width: 20%;
  height: 20%;
  position: absolute;
  opacity: .7;
}

.block_cyan {
  background-color: cyan;
  top: 0;
  left: 0;
}

.block_magenta {
  background-color: magenta;
  bottom: 5%;
  left: 5%;
}

.block_yellow {
  background-color: yellow;
  top: 10%;
  right: 10%;
  animation: diagonal 1s infinite alternate ease-in-out;

}

.block_black {
  background-color: black;
  top: 35%;
  right: 10%;
  animation: horizontal 1s infinite alternate ease-in-out;

}

.block_white {
  background-color: white;
  top: 45%;
  right: 0;
  width: 60%;
  animation: vertical 1.5s infinite alternate ease-in-out;
}

<ul class="blocks">
  <li class="block block_cyan"></li>
  <li class="block block_magenta"></li>
  <li class="block block_yellow"></li>
  <li class="block block_black"></li>
  <li class="block block_white"></li>
</ul>

БЛОГ НА HUSL

Позиционирование элементов CSS (flex)

Ответы (1 шт):