html – 为flexbox的最后一列设置样式

我必须实现如下设计：

这将是WordPress的index.php页面,因此它将使用WordPress循环将博客文章作为单独的“资源”输出.

通常情况下我会将它作为flexbox实现,因为项目的数量是可变的,我需要它才能响应,但这次我们的设计师在项目之间添加了边框.

这样会很好但是在行结束之前或之后不包括边框.我无法解决这个我所知道的任何伪选择器.

目前我的HTML和CSS看起来像这样：

section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

section div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid red;
  padding-right: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}

<section>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
</section>

这是我可以用CSS网格解决的问题吗？有没有办法使用flexbox或其他不是网格的布局来实现这一点？

这实际上取决于项目下的背景,但如果它是由一种颜色组成,您可以使用简单地将左边框与伪元素重叠的解决方案,如下所示：

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-left: -20px;
}

section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 1px;
  background: #fff;
}

section div {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-left: 1px solid red;
  padding-left: 20px;
  margin-left: 20px;
  text-align: center;
}

<section>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
</section>