css flex的砌体布局不起作用答案

【问题标题】：masonry layout with css flex not workingcss flex的砌体布局不起作用
【发布时间】：2017-11-08 06:47:17
【问题描述】：

我有以下情况，其中基于 css flex 的砌体显示的图像超出了父 div 的宽度。它应该像普通的砌体一样向下移动....但我不知道如何解决这个问题。

我的代码如下所示...

HTML

<div class="mansory-gallery">
    <div class="item">
        <a href="https://www.amazon.co.jp/dp/4861550688/" target="_blank"><img src="http://minoboshitaro.com/wp-content/uploads/2017/11/51AEWKP5CQL._SX339_BO1204203200_.jpg"></a>
    </div>
</div>

CSS

.mansory-gallery {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-flow: column wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-height: 100vw;
    flex-direction: column;
}

.item {
    width: 28%;
    padding: 15px;
    margin: 5px;
    text-align: center;
    display: flex;
    flex: 1 1 auto;
}

.mansory-gallery a img {
    max-width: 100%;
    transition: .8s opacity;
    height: auto;
}

请告诉我如何解决这个问题！感谢您的宝贵时间！

【问题讨论】：

提供最小的工作代码 sn-p 重现问题。
看看这个：complete guide to flexbox。也许这有帮助？
我不能完全说出这里的问题，但也许这会有所帮助 - codepen.io/nhensh/pen/OZRgYa 我正在删除边距并改用 justify-content: space-around;。

标签： html css flexbox masonry

【解决方案1】：

尝试使用justify-content: space-around; 代替边距。

 .mansory-gallery {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-flow: column wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-height: 100vw;
    flex-direction: column;
    justify-content: space-around;
}

.item {
    width: 28%;
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex: 1 1 auto;
}

.mansory-gallery a img {
    max-width: 100%;
    transition: .8s opacity;
    height: auto;
}

示例 - https://codepen.io/nhensh/pen/OZRgYa

【讨论】：