используя flexbox, чтобы получить pinterest или макет кладки jQuery

Это вполне возможно.

Благодаря оригинальному ответу @ leopld, я смог создать тот, который не зависит от фиксированной высоты.

Сделав положение гибкого контейнера position: absolute или position: fixed , вы можете заставить его заполнять доступное пространство динамически.

Ссылка на Codepen: http://codepen.io/anon/pen/Jpnyj?editors=110 . В это время я включил все префиксы поставщиков, которые вам нужны.

наценка

 <div class="wrapper"> <div class="box box-red"></div> <div class="box box-blue"></div> <div class="box box-pink"></div> <div class="box box-purple"></div> <div class="box box-green"></div> <div class="box box-yellow"></div> <div class="box box-brown"></div> <div class="box box-red"></div> <div class="box box-blue"></div> <div class="box box-pink"></div> <div class="box box-purple"></div> <div class="box box-green"></div> <div class="box box-purple"></div> <div class="box box-green"></div> <div class="box box-yellow"></div> <div class="box box-blue"></div> <div class="box box-pink"></div> <div class="box box-purple"></div> <div class="box box-green"></div> <div class="box box-yellow"></div> <div class="box box-red"></div> <div class="box box-brown"></div> <div class="box box-blue"></div> <div class="box box-red"></div> <div class="box box-green"></div> <div class="box box-yellow"></div> <div class="box box-brown"></div> </div> 

Стили

 body { background: black; } .wrapper { position: absolute; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; } .box { margin: 5px; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .box-red { height: 100px; background: red; } .box-blue { height: 120px; background: blue; } .box-pink { height: 144px; background: pink; } .box-purple { height: 250px; background: purple; } .box-green { height: 200px; background: green; } .box-yellow { height: 20px; background: yellow; } .box-brown { height: 290px; background: brown; } 

Столбцы CSS3 помогут вам приблизиться к этому макету. (Обратите внимание, что поддержка в недавних браузерах может быть плохой, и спецификация может измениться в будущем.) Другой пример не работал с FF, но это делает:

HTML:

 <div id="wrapper"> <div id="cols"> <div class="item"> <img src="http://placekitten.com/400/700?image=1" /> <p>0) Craft beer farm-to-table.</p> </div> <div class="item"> <img src="http://placekitten.com/400/450?image=2" /> <p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p> </div> [more items] </div> </div> 

CSS:

h1, h2, ul, p {margin: 1rem; }

 #wrapper { width: 900px; margin: 20px auto; padding: 10px; outline: solid black 1px; background-color: gainsboro; } #cols { -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; } .item { display: inline-block; background: #FEFEFE; margin: 0; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 10px; } .item img { width: 100%; border-bottom: 1px solid black; padding-bottom: 10px; margin-bottom: 5px; } .item p { font-size:small; margin: 0; } 

Или играйте с полным примером .

Обновление. Насколько я знаю, с Flexbox это невозможно. Flexbox больше интересуется горизонтальной компоновкой, а не вертикальной. Я был бы счастлив, если бы оказался ошибочным, но это то, что я собрал из своего ограниченного опыта. Если вы хотите узнать больше, лучшая статья, которую я нашел по этому вопросу, такова: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Да, конечно, это Крис Койер Как вы догадались?)

В любом случае, даже если вы можете сделать это с помощью Flexbox, это будет немного взломать, потому что для этого не нужен Flexbox. Есть намного более чистый способ сделать это с помощью столбцов CSS3 . Вот пример .

Поддержка браузера не самая большая: http://caniuse.com/#search=column%20layout Даже этот пример, похоже, не поддерживает Firefox, хотя я не знаю, почему, поскольку FF действительно поддерживает соответствующие свойства, согласно CanIUse.

Итак, резюме и TLDR: это замечательная идея, делая это в чистом CSS, но в большинстве практических целей на данный момент невозможно. Вероятно, вам лучше пойти с макетом JQuery

На самом деле вы можете сделать это без каких-либо трудностей с использованием flexbox. Единственным недостатком является то, что вы должны указать абсолютную высоту для обертки, чтобы сделать ее содержимое фактически завершенным. В противном случае все это будет выложено вдоль одной великой, бесконечной колонны.

HTML:

 <div class="wrapper"> <div class="red"></div> <div class="blue"></div> <div class="pink"></div> <div class="purple"></div> <div class="green"></div> <div class="yellow"></div> <div class="brown"></div> </div> 

CSS (неперечисленный):

 .wrapper { background: black; display: flex; flex-flow: column wrap; height: 450px; align-items: center; } .wrapper > div { height: 100px; margin: 5px; width: 100px; } .wrapper > :nth-child(3n+2) { border: 2px solid white; height: 300px; } 

Я также создал скрипт JS , так что вы можете увидеть результат напрямую.

В двух словах, однако, трюк заключается в использовании flex-direction: column в сочетании с flex-wrap: wrap и фиксированная высота для обертки.

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