Question

我试图理解CSS display: 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>

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

Answer 1

由于CSS Multi-Column Layout Module Level 1中的column-gap和display: flex;属性（哇，这是一口气），我现在只用CSS来摆弄这个）。大多数主流浏览器仍然在前缀之后，但 IE支持这种前缀，即使在IE10中也是如此！

对你而言，坏消息（我猜）是这并不像你希望的那样使用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; }。我不确定Flexbox CSS模块是否可行。但是，您可以访问Barbarian Meets Coding网站，查看有关Flexbox可能实现的更多演示。

这是一个简单的演示：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

点击上面演示中的全屏，然后调整浏览器大小以查看其实际效果。

此处还有JSFiddle演示。

有没有办法像Pinterest这样的画廊展示：flex？

1 个答案: