Блог

У меня возникли проблемы со сдвигом CLS (.28) с порядком гибких блоков, или мне нужен способ изменить порядок divs. Высоты неизвестны, поэтому нельзя использовать маржу и т. Д. Содержимое большое (изображения и т. Д.) В каждом блоке. Этот код не создает проблему CLS, потому что это всего лишь небольшой пример. Я также тестировал сетки, но у них еще более высокие CLS. Есть ли другой способ изменить порядок и не использовать flex box?

Вот код:

 <style>
    .layoutflex {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
       -ms-flex-direction: column;
       flex-direction: column;
       flex-shrink: 0;
    }

    .layoutflex .topflex {
        order: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
    }

    .layoutflex .bottomflex {
        order: 0;
        -ms-flex-order: 0;
        -webkit-order: 0;
    }

</style>

<div class="layoutflex">
<div class="topflex">Row 1</div>
<div class="bottomflex">Row 2</div>
</div>
 

Существует много причин сдвигов макета в веб-приложении. Некоторые из них очень легко обнаружить и разрешить, в то время как другие — нет. Ниже приведен список причин кумулятивного сдвига макета:

1. Отображение изображений, видео и объектов пользовательского интерфейса без зарезервированных размеров (без соответствующих значений ширины и высоты)
2. Динамическое или асинхронное добавление или удаление элементов DOM без значений ширины и высоты заполнителя
3. Динамическое изменение размера элементов пользовательского интерфейса без действий пользователя
4. Сторонние скрипты или поставщики рекламы вставляют рекламные баннеры без зарезервированного заполнителя с соответствующими размерами.
5. Использование определенных свойств CSS Flexbox
6. Анимация или перенос свойств CSS, которые вызывают перепрошивку пользовательского интерфейса, таких как отступы, поля, высота, ширина, верх, левый и т. Д

Если явно не указано, когда веб-браузеры рисуют элементы flexbox, он не знает точного размера элементов, поскольку они должны быть вычислены из-за природы Flexbox.

Гибкие элементы могут сжиматься или сгибаться (увеличиваться) в зависимости от доступного пространства. В этом и заключается проблема. Браузеры постепенно отрисовывают элементы DOM во фреймах. Следовательно, точный размер элемента Flex известен до тех пор, пока все элементы не будут отрисованы.

Некоторые свойства flex вызывают сдвиги макета при неправильном использовании. они включают в себя:

1. Align-items свойство, которое изменяет поток элементов flex вдоль поперечной оси
2. Justify-content свойство, которое изменяет поток элементов flex вдоль главной оси Align-self
3. flex что приводит к увеличению размера элемента flex на основе оставшегося пространства
4. Использование полей для перемещения элементов flex по горизонтали или вертикали

Самый простой способ исправить сдвиги макета, вызванные элементами flexbox, — это присвоить элементам значения ширины. Это поможет браузеру в принятии решений. Благодаря заданной ширине элементы flexbox могут быть расположены соответствующим образом во фреймах.

Проблема не в flexbox, а в том, что изображения загружаются с динамической высотой. Кроме того, не забудьте добавить этот CSS в строку вместо внешнего файла, он будет загружаться вместе со страницей и не вызовет сдвиг макета.

Если у вас есть изображения, единственный способ избежать сдвигов макета — установить для них фиксированную высоту.

Этот пример не должен вызывать сдвиг макета, он загружает изображения внутри контейнера 16: 9, который может быть вычислен браузером до загрузки любых изображений. Вы можете использовать тот же принцип, настраивая padding-bottom в классе sixteen-nine в соответствии с любыми предложениями, которые вам нужны.

 <div style="max-width:500px;margin:0 auto;">
  <div class="layoutflex">
    <div class="topflex">
      <div class="sixteen-nine">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" title="doggo" />
      </div>
    </div>
    <div class="bottomflex">
    <div class="sixteen-nine">
        <img src="https://i.imgur.com/Y8WHhk2.jpg" title="bear" />
      </div>
    </div>
  </div>
</div>

<style>
.layoutflex {
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
    }

.layoutflex .topflex {
  order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
}

.layoutflex .bottomflex {
  order: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
}

.sixteen-nine {
  padding-bottom:56.25%;position: relative
}
.sixteen-nine img {
  position: absolute;
  top:0;left: 0;
  width: 100%;height: 100%;
  object-position: center;
  object-fit: cover
}
</style>
 

Codepen: https://codepen.io/nonsintetic/pen/QWqNENd