Возможно ли, чтобы элементы гибки были плотно прилегают к элементам над ними?

Это, по сути, макет Pinterest. Однако решения, найденные в Интернете, завертываются в столбцы, что означает, что контейнер непреднамеренно растет горизонтально. Это не макет Pinterest, и он не работает с динамически загруженным контентом.

Я хочу сделать кучу изображений с фиксированной шириной и асимметричной высотой, выложенными горизонтально, но обертывание в новую строку, когда соблюдены пределы контейнера с фиксированной шириной:

Может ли flexbox сделать это, или мне нужно прибегнуть к решению JS, например, к масонству?

ОТВЕТЫ

Ответ 1

Flexbox - это "одномерная" система компоновки: она может выравнивать элементы вдоль горизонтальных или вертикальных линий.

Истинная система сетки "2-мерная": она может выравнивать элементы вдоль горизонтальных и вертикальных линий. Другими словами, ячейки могут охватывать столбцы и строки, которые flexbox не могут выполнять.

Вот почему flexbox имеет ограниченную емкость для построения сетей. Это также причина, по которой W3C разработал еще одну технологию CSS3, Макет сетки (см. Ниже).

В контейнере flex с flex-flow: row wrap элементы flex должны быть перенесены в новые строки.

Это означает, что элемент flex нельзя обернуть под другим элементом в той же строке.

введите описание изображения здесь

Обратите внимание, как div # 3 обертывается ниже div # 1, создавая новую строку. Он не может упасть ниже div # 2.

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

введите описание изображения здесь

enter image description here

image credit: Jefree Sujit

column wrap Решение

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

В результате контейнер со столбцом может быть невозможен во многих случаях.

Другие решения

  • Добавить контейнеры

    В первом изображении выше рассмотрите обертывание элементов 2 и 3 в отдельном контейнере. Этот новый контейнер становится братом к элементу 1. Выполнено.

    Один недостаток стоит выделить: если вы хотите использовать свойство order для повторной компоновки макета в мультимедийных запросах, этот метод может исключить эту возможность.

  • Масонство Desandro

    Масонство - это библиотека компоновки сетки JavaScript. Это работает путем размещения элементов в оптимальном положении на основе доступных вертикальное пространство, вроде как каменщик, монтирующий камни в стене.

    source: 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-модуль определяет двумерную систему компоновки на основе сетки, оптимизированную для дизайна пользовательского интерфейса. В модели макета сетки дети контейнера сетки могут быть помещены в произвольные слоты в предопределенной гибкой или фиксированной сетке макета.

    source: https://drafts.csswg.org/css-grid/

Ответ 2

То, что вы хотите, может быть достигнуто в 3 2 способа, CSS wise:

1. <Удаp > flexbox:

    .parent {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: {max-width-of-container} /* normally 100%, in a relative container */
        min-height: {min-height-of-container}; /* i'd use vh here */
    }
    .child {
        width: {column-width};
        display: block;
    }

Забастовкa >

2. Столбцы CSS

(это решение имеет очень четкое преимущество встроенного column-span - довольно удобно для названий). Недостатком является упорядочивание элементов в столбцах (первый столбец содержит первую треть элементов и т.д.). Я сделал jsFiddle для этого.

    .parent {
        -webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
        -moz-columns: {column width} {number of columns}; /* Firefox */
        columns: {column width} {number of columns};
    }
    .child {
         width: {column width};
    }
    /* where {column width} is usually fixed size 
     * and {number of columns} is the maximum number of columns.
     * Additionally, to avoid breaks inside your elements, you want to add:
     */
    .child {
        display: inline-block;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }

3. Масонский плагин

абсолютное позиционирование после вычисления размеров сделанных элементов, через JavaScript (плакат масонства).

Ответ 3

подход column кажется хорошим компромиссом, если вы установите column-width через vmin или vmax единицы и отбрасываете column-count (первый фрагмент), display:grid и vmin также является опцией для futur (второй фрагмент).

вдохновленный ответом @Lanti.

тестовая демонстрация с vmin

.container {

}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 0;
}

.portfolio ul {
  -webkit-column-width:50vmin;
     -moz-column-width:50vmin;
          column-width:50vmin;
  -webkit-column-fill:balance;
     -moz-column-fill:balance;
          column-fill:balance;
  -webkit-column-gap: 3px;
     -moz-column-gap: 3px;
          column-gap: 3px;
}

.portfolio ul:hover img {
  opacity: 0.3;
}

.portfolio ul:hover img:hover {
  opacity: 1;
}

.portfolio ul li {
  margin-bottom: 3px;
}

.portfolio ul li img {
  max-width: 100%;
  transition: 0.8s opacity;
}
<section class="container portfolio">
  <ul>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
  </ul>
</section>

Ответ 4

Вы можете добиться эффекта каменной кладки в соответствии с вашим снимком экрана, но вы установили высоту внешнего div динамически

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.item-list {
  max-width: 400px;
  border: 1px solid red;
  display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100vw;
}
.item-list__item {
  border: 1px solid green;
  width: 50%;
}
<div class="item-list" >
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
    county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
  </div>
</div>

Ответ 5

Вместо flexbox я рекомендую использовать columns для таких сеток. Как вы можете видеть, интервал на нижних изображениях может быть лучше, но для собственного решения для CSS я считаю это довольно аккуратным. Нет больше JS:

.container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 0;
}

.portfolio ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 3px;
  -webkit-column-gap: 3px;
  column-gap: 3px;
}

.portfolio ul:hover img {
  opacity: 0.3;
}

.portfolio ul:hover img:hover {
  opacity: 1;
}

.portfolio ul li {
  margin-bottom: 3px;
}

.portfolio ul li img {
  max-width: 100%;
  transition: 0.8s opacity;
}
<section class="container portfolio">
  <ul>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
  </ul>
</section>