响应图像行

Question

我有一个每行有3张图像的部分。共有3行，共9张图片。

我想让它们反应灵敏，但无法弄清楚如何相应地显示所有图像，目前它显示第一张图像，然后立即显示第四张图像，而不是第二张图像。我也试图将它们居中但失败了，这是移动视图的截图

我的响应式视图的css代码以及我到目前为止所尝试的内容。

@media only screen and (max-width:700px) {

  .articles {
   margin: 50px 30px;
  }

  .article {
   left: 0;
  }

}

工作小提琴：https://jsfiddle.net/mhrxbqgw/2/

Answer 1

尝试像这样的Flexbox

＆＃13;

＆＃13;

.articles {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.article {
  width: 30%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.article-image {
  width: 100%;
}

.article-title {
  font-family: "SFUI Display";
  color: #3f3f3f;
  font-size: 24px;
}

@media screen and (max-width: 600px) {
  .article {
    width: 100%;
  }
}

＆＃13;

<section class="articles">

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 1 </h3>

  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 2 </h3>

  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 3 </h3>

  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 4 </h3>

  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 5 </h3>

  </article>


  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 6 </h3>



  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 7 </h3>



  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 8 </h3>



  </article>

  <article class="article">
    <img class="article-image" src="https://picsum.photos/200">
    <h3 class="article-title">Article 9 </h3>



  </article>


</section>

＆＃13;

＆＃13;

＆＃13;