Flexbox - это «одномерная» система компоновки: она может выравнивать элементы вдоль горизонтальных или вертикальных линий.
Истинная сетка «2-мерная»: она может выравнивать элементы вдоль горизонтальной и вертикальной линий. Другими словами, ячейки могут располагаться между столбцами и строками, которые невозможно выполнить с помощью flexbox.
Вот почему flexbox имеет ограниченную емкость для построения гридов. Это также является причиной того, что W3C разработал еще одну технологию CSS3, Grid Layout (см. Ниже).
В контейнере flex с flex-flow: row wrap
элементы гибкости должны быть завернуты к новым строкам .
Это означает, что элемент гибкости нельзя обернуть под другим элементом в той же строке .
Обратите внимание, что div # 3 обертывается ниже div # 1 , создавая новую строку. Он не может упасть ниже div # 2 .
В результате, когда элементы не самые высокие в строке, остается пустое пространство, создавая неприглядные пробелы.
image credit: Jefree Sujit
column wrap
Решение
Если вы переключитесь на flex-flow: column wrap
, элементы гибки будут стекаться вертикально, а сетчатая компоновка более достижима. Однако контейнер с колоновым направлением имеет три потенциальные проблемы сразу:
- Он расширяет контейнер горизонтально, а не вертикально (например, макет Pinterest).
- Это требует, чтобы контейнер имел фиксированную высоту, поэтому элементы знают, где их можно обернуть.
- На момент написания этой статьи у него есть недостаток во всех основных браузерах, где контейнер не работает 't расширяться для размещения дополнительных столбцов .
В результате контейнер со столбцом может быть невозможен во многих случаях.
Другие решения
- Добавить контейнеры В первых двух изображениях выше рассмотрите обертывание элементов 2 и 3 в отдельный контейнер. Этот новый контейнер может быть одним из братьев к пункту 1. Выполнено. Вот подробный пример: Раскладка клавиатуры калькулятора с помощью flexbox . Один недостаток стоит выделить: если вы хотите использовать свойство
order
для повторной компоновки вашего макета (например, в медиа-запросах), этот метод может устранить эту опцию. - Desandro Masonry Масонство - это библиотека компоновки сетки JavaScript. Он работает, поместив элементы в оптимальное положение на основе имеющегося вертикального пространства, похожего на камни для камней в стене. источник: http://masonry.desandro.com/
- Как создать сайт, который работает как Pinterest [ Pinterest] действительно классный сайт, но то, что я нахожу интересным, - это то, как эти пинборды выложены ... Поэтому цель этого учебника - воссоздать этот отзывчивый эффект блока ... source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
- Модуль компоновки CSS-сетки Уровень 1 Этот CSS-модуль определяет двумерную систему компоновки на основе сетки, оптимизированную для дизайна пользовательского интерфейса. В модели макета сетки дети контейнера сетки могут быть помещены в произвольные слоты в предопределенной гибкой или фиксированной сетке макета. источник: https://drafts.csswg.org/css-grid/ Пример компоновки сетки: Макетная кладка только для CSS, но с элементами, упорядоченными по горизонтали
задан Komil Gulboev 25 March 2019 в 07:10
поделиться