按顺序排列，超出容器换行显示

有一个非常常见的需求：现有一个图片列表，图片个数不确定，要求从左到右排列，超出容器宽度则换行。 这个需求有很多种方法可以做，但是主要问题是margin不好设置，使用flex布局配合nth-of-type选择器能很好的解决了这个需求，记录下来当作学习。
dom结构如下：

 <div class="content">
        <div>顶部内容</div>
        <div class="img-group">
            <div class="img-box ">
                <img src="xxx" />
            </div>
            <div class="img-box">
                <img src="xxx" />
            </div>
            <div class="img-box">
                <img src="xxx" />
            </div>
            <div class="img-box">
                <img src="xxx" />
            </div>
            <div class="img-box">
                <img src="xxx" />
            </div>
        </div>
        <article>
            我们遇到什么都不要放弃，微笑着面对它，消除恐惧的最好办法是面对恐惧，加油，欧里给！！！
        </article>
    </div>

css代码如下：

  .content {
        width: 320px;
        border: 1px solid #ccc;
        margin: 0 auto;
        padding: 10px;
    }
    .img-box {
        width: 100px;
    }
    .img-group{
        display:flex;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
    /*这一步根据每一行显示的个数决定*/
    .img-box:nth-of-type(3n-1) {
        margin: 0 10px;
    }
    .img-box>img {
        max-width: 100%;
    }

效果如下：