设置flexbox的最后一列的样式

Question

我必须实现这样的设计：

这将是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或其他不是网格的布局来实现这一点？

Answer 1

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

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>

Answer 2

我有你需要的东西，我正在用伪元素显示正确的边框，如果它是行的最后一个元素，则将其推离屏幕，以及一些空的div来推动新行以保持布局。

section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}

section div {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding: 0 20px;
  position: relative;
}

section div:nth-last-child(9) ~ div{
    height: 0;
	width: 140px;
}

section div::after {
  content: '';
  position: absolute;
  border-right: 1px solid red;
  left: 100%;
  display: block;
  height: 100%;
}

section div:nth-last-child(9)::after {
	border: none;
}

section div p { width: 140px; }

  

<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>