javascript - 如何使用边距 : auto? 调整画廊中大小相同的图像

Question

我在 div 元素“container”中有图片库，width:70%。这些图像需要用自动边距来证明。

这是我的 html 代码:(我有 4 张图片)

<div class="container">         
    <ul class="grid gallery">
        <li class="animation-element">
            <figure>
                <img src="http://s33.postimg.org/638l2frnz/google_logo.png" alt="GINIS">
                <figcaption>
                    <h3>Name</h3>
                    <span>Description</span>
                </figcaption>
            </figure>
    </li>           
</div>

还有CSS代码:

.grid {
    width:100%;
    margin: 0 auto;
    list-style: none;
    text-align:left;}
.grid li {
  border:1px solid blue;
    box-shadow:0px 0px 1px #black;
    display: inline-block;
    width: 250px;
    margin-bottom:20px;
    font-family: "Ubuntu", sans-serif;
    text-align: left;
    position: relative;}

在这个 CSS 代码中，这个 (li) 是应该被证明的主要元素。

这是我的代码示例: http://codepen.io/anon/pen/QEybgL

Answer 1

将此添加到您的 css 代码:

.grid {
    padding: 0;
    display: flex;
}

.grid > li {
    margin: auto auto 20px auto;
    justify-content: space-around;
}

解释:

flex 值:它为其所有直接子级启用 flex 上下文。

justify-content:这定义了沿主轴的对齐方式。当一行中的所有 flex 元素都不灵活或灵活但已达到其最大大小时，它有助于分配剩余的额外可用空间。当元素溢出行时，它还会对元素的对齐方式施加一些控制。

space-around value:元素均匀分布在一行中，周围的空间相等(如果元素大小相同)。

ma​​rgin:在 flex 容器中设置为 auto 的边距会吸收额外的空间。

---

我建议您阅读有关 flexbox 的内容.