有没有办法用 display: flex 做一个像 Pinterest 这样的画廊？

Question

我试图了解 CSSdisplay: flex属性是如何工作的，但我找不到一种方法来完成我的尝试：像 Pinterest 这样的照片/作品集画廊，只使用 flexbox。

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f1f1f1;
}
.Portifolio-container {
    width: 1200px;
    margin: 0 auto 20px;
    display: flex;
    align-items: flex-start;
    flex-basis: 10;
    justify-content: center;
    flex-flow: row wrap;
}
.Portifolio-image {
    width: 300px;
    height: auto;
    margin: 0;
    margin-left: 20px;
    margin-right: 20px;
}
.imagem {
    width: 296px;
    max-height: auto;
    background-color: white;
    margin-bottom: 0px;
    display: block;
    border: 2px solid #e4e4e4;
}
.portifolio-name {
    background-color: white;
    margin-top: 0px;
    height: 100px;
    border: 2px solid #e4e4e4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: trebuchet;
    font-size: 12px;
    text-align: left;
    
}    

<div class="Portifolio-container">
    <div class="Portifolio-image">
        <img src="http://wallpapercave.com/wp/HkjVzNs.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
    <div class="Portifolio-image">
        <img src="https://s-media-cache-ak0.pinimg.com/236x/85/52/14/855214cc10e81dc3613f717c2d16d60b.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
    <div class="Portifolio-image">
        <img src="https://s-media-cache-ak0.pinimg.com/236x/1d/62/94/1d6294ece94809441340c885feddd08a.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
        <div class="Portifolio-image">
        <img src="http://wallpapercave.com/wp/HkjVzNs.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
      <div class="Portifolio-image">
        <img src="https://s-media-cache-ak0.pinimg.com/236x/1d/62/94/1d6294ece94809441340c885feddd08a.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
    <div class="Portifolio-image">
        <img src="https://s-media-cache-ak0.pinimg.com/236x/85/52/14/855214cc10e81dc3613f717c2d16d60b.jpg" class="imagem"></img>
        <div class="portifolio-name"></div>
    </div>
  
</div>

我希望行在三张图像后中断，但同时我希望它们在每张图像的底部只有 20 像素的边距。

Answer 1

我摆弄了一下，现在只用 CSS就可以做到这一点，这要归功于CSS 多列布局模块级别 1中的column-width和column-gap属性（哇，那是一口）。大多数主流浏览器仍然支持前缀，但IE 支持这种无前缀，即使在 IE10 中！

对你来说坏消息（我猜）是这display: flex;不像你希望的那样使用。我不确定 Flexbox CSS 模块是否可行。但是，您可以访问Barbarian Meets Coding站点以查看更多关于 Flexbox 的演示。

这是一个裸骨演示：

div {
    box-sizing: border-box;
}
.container {
    -moz-column-width: 18em;
    -webkit-column-width: 18em;
    column-width: 18em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;
    column-gap: 1em;
    margin: 5px;
}
.item {
    display: inline-block;
    width: 100%;
    padding: 5px;
    margin: 5px;
    border: 1px solid black;
}

<div class="container">
    <div class="item">text saves lives, use it more! Or use it less; it's up to you, really</div>
    <div class="item">more text that makes stuff seem really, really long but really it doesn't say anything at all. Isn't that just the craziest thing?</div>
    <div class="item">even more text</div>
    <div class="item">text the fourth</div>
    <div class="item">The container contains things</div>
    <div class="item">Lorem ipsum dolor sit amet oh forget this filler text, I'm tired of it!</div>
    <div class="item">blah blah blah blah blah blah blah blah h</div>
    <div class="item">More words to impress you</div>
    <div class="item">Content Content Content! Like Location Location Location in Real Estate, it's what's important on the web!</div>
    <div class="item">Derp</div>
</div>

在上面的演示中单击“全屏”并调整浏览器的大小以查看它的运行情况。

这里还有一个JSFiddle演示。