Выпуск CSS Flex Box Gallery - PullRequest
Новая
       19

Выпуск CSS Flex Box Gallery

0 голосов
/ 09 мая 2018

В настоящее время я пытаюсь создать «галерею изображений» с помощью flex box. Вот что у меня сейчас: https://jsfiddle.net/neu28Lnc/2/

Ширина изображений всегда составляет 50% - это означает, что у меня всегда будет 2 изображения рядом друг с другом. Высота страницы не фиксирована - вы сможете прокручивать / добавлять другие изображения.

Проблема, с которой я столкнулся, заключается в том, что я хочу устранить пробелы между этими изображениями. Вот так: https://jsfiddle.net/neu28Lnc/1/ (жестко закодировано с полями).

Обычно я использовал бы flex-direction: column;, но поскольку у меня нет высоты, он никогда не будет перенесен во 2-й столбец.

Может быть, некоторые из вас могут помочь мне с моей проблемой / найдут лучшее решение.

Заранее спасибо.

Syllz

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Вы можете что-то сделать с css Grid , но, в конце концов, css grid больше подходит для сеток, конечно.

Сетка состоит из линий, которые поддерживают друг друга. Каждая прямоугольная форма, нарисованная этими линиями, неизбежно разделяет общую горизонтальную и вертикальную линию.

Flexbox - это еще один вариант, но вы должны установить высоту для своего контейнера, чтобы столбцы переносились с flex-direction: column.

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

Лучшим вариантом здесь является Multi-column . Пример

Минусы: - Мы не можем иметь элемент размером более 1 столбца. - Предметы не перечислены по горизонтали.

Для меня это лучшее решение "только для css".

W3C - несколько столбцов CSS

0 голосов
/ 09 мая 2018

Вы можете использовать кладку, используя сетку.Надеюсь, что это полезно для вас. 

.container {
     display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 20px;
}

.image {
  height: 50px;
  background: #ddd;
}

.image2 {
  height: 150px;
  background: #abc;
}

.image3 {
  height: 180px;
  background: #def;
}

.image4 {
  height: 30px;
  background: #fad;
}

.image5 {
  height: 150px;
  background: #ddd;
}
<div class="container">
  <div class="image img">img1</div>
  <div class="image2 img">img2</div>
  <div class="image3 img">img3</div>
  <div class="image4 img">img4</div>
  <div class="image5 img">img5</div>
  <div class="image img">img1</div>
  <div class="image2 img">img2</div>
  <div class="image3 img">img3</div>
  <div class="image4 img">img4</div>
  <div class="image5 img">img5</div>
</div>
...