Javascript 阵列中图像的布局

这是布局图

基本上，我正在获取阵列中的图像，并尝试用这种布局创建一个图库。我不知道该怎么办。我尝试了grid和：nth child（偶数）和：nth child（奇数），但仍然不起作用

<ul>
    <?php foreach ($images as $image) :?>
      <li><img src="<?php echo $image['url'] ;?>"></li>
    <?php endforeach ;?>
</ul>

“>

链接到JSFIDLE->

谢谢。

我们可以这样做

ul {
max-width:90%;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
ul li {
  list-style-type:none;
  width:calc(50% - 10px);
}
ul li:nth-child(3n + 1) {
  width:100%;
}
ul li img {
  width:100%;
}

---

使用widt:100%；我认为最好使用flex:01计算（50%-10px）；并使用列间距作为列之间的间距。谢谢@vinay@sfili，使用flex:01计算（50%-10px）的原因是什么代替宽度：100%？@Sfili_81请分享一个例子。还有一个例子@Sfili_81使用你的方法比vinay的有什么优势？抱歉，只是想了解一下。