Обтекание гибкой колонки CSS без предварительной установки высоты и форсирования количества колонок - PullRequest
0 голосов
/ 27 февраля 2019

Пример кода: https://jsfiddle.net/z7ybks9u/2/

Мотивация : я бы хотел форсировать макет из 3 столбцов , с поддержкой фиксированной ширины, но переменной высоты DIVS, сэффективность макета, которая не будет открывать большие «пробелы» между элементами.Поскольку количество элементов неизвестно, Я не могу ограничить высоту гибкого контейнера .

Проблема : без принудительного изменения высоты гибкого контейнера я не вижуболее одного столбца, поскольку он просто использует вертикальное пространство, необходимое для размещения всех элементов в одном столбце.

Что я вынужден делать:

gallery-height {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      max-height: 700px;   <-----  NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
    }

1 Ответ

0 голосов
/ 27 февраля 2019

Отключение контейнера Flex в пользу column-count может помочь: https://jsfiddle.net/69nmwqag/

.gallery-height {
  column-count: 3;
}

Затем я сбросил width: 30%; на .img.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...