css - 桌面和移动设备的两列卡片布局

Question

这是我的 fiddle :https://jsfiddle.net/b6q7pmkg/我正在尝试实现两列卡片，无论在移动设备还是台式机上，它始终保持两列。所以像这样:在桌面上:

在手机上:

这是我目前所拥有的......但还不完全......

.cardContainer {
  max-width: 30rem;
}

CSS:

.root {
    display: inline-block;
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
    color: rgb(90, 90, 90);
}

.link {
    vertical-align: bottom;
    text-decoration: none;
    cursor: pointer;
}

.imageContainer{
    display: inline-block;
    vertical-align: top;
    width: 40%;
}

image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.content {
  display: inline-block;
  vertical-align: top;
  width: 60%;
  padding: 1rem;
}

.large .title {
    font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
    font-size: 1.1875rem;
    line-height: 1.263;
    letter-spacing: 0.0125rem;
    font-weight: 700;
}

.body {
    margin-top: 1rem;
    color: rgb(139, 139, 139);
    display: block;
}
.description {
    margin-bottom: 0;
    font-size: inherit;
    margin-top: 1rem;
}

Answer 1

Here's具有基本 CSS 的模型。

这里要知道的重要一点是双 flex 盒；一个 flexbox 用于卡片(img/paragraph)，一个 flexbox 用于所有卡片，带有 flex-wrap: wrap; 以确保它们正确地工作。

我使用 this flexbox 备忘单，用于准确记住 flexbox 的工作原理 :)

这是 jsfiddle 代码的副本:

section{
  display: flex;
  flex-wrap: wrap;
}

article{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 300px;
}

<section>
  <article>
    <img src="http://lorempixel.com/150/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/151/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/150/101/" />
    <p>
      Some text.
    </p>
  </article>
</section>

编辑:我just made对带有灰色文本和垂直居中段落的 fiddle 的编辑:)