设置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来推动新行以保持布局。< / p>

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>