展开的弹性盒项目之间的垂直边框

Question

我有一些我想在 flex-box 中排列的项目，以便它们可以包裹在较小的屏幕上。 flex-wrap:wrap; 可以做到这一点。

当它们“展开”（即宽屏幕）时，我希望内容元素之间有一条垂直线。当屏幕/容器变窄时，我希望它们换行到下一行并且没有有边框。

我希望整个内容都位于页面的中心。并不要求所有内容元素具有相同的宽度。

类似这样的：

我见过Smart borders between flex items – the dumb way，但是当 flex-box 容器在页面中“浮动”时这不起作用，因为它依赖于隐藏的 -1px 边距来隐藏备用边框，这意味着项目必须一直拉伸到左边距以隐藏它们的边距。对于居中的框，这并不总是正确的。

/* Based on https://codepen.io/thatemil/pen/MrrJyZ 
 * used by
 * https://thatemil.com/blog/2018/01/08/direction-independent-borders-this-is-stupid/
 */

.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
}

.item {
  border-left: 1px solid red;
  margin-left: -1px;
  padding: 5px;
}

Short (unwrapped):

<div class="container">
  <div class="item" style="background-color:pink;">foobar</div>
  <div class="item" style="background-color:grey;">quux</div>
</div>

Long (wrapping):

<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

Answer 1

要使用 **flexbox* 实现此行为，您需要一个媒体查询或其他触发器来移除换行时的边框。因此，除非您知道物品何时包装，否则这样的解决方案是没有帮助的。但这里有一个使用伪元素作为分隔符的 flex 容器的演示。

jsFiddle demo

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 5px;
}

.item:first-child {
  order: 1;
}

.item:last-child {
  order: 3;
}

.container::before {
  order: 2;
  content: "";
  border-right: 2px solid red;
}

<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

---

另一个可能的选项是 CSS Grid。使用容器的背景颜色和grid-column-gap 属性作为分隔符，使用auto-fit 函数进行换行。

jsFiddle demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background-color: red;
  grid-column-gap: 2px;
}

.item {
  padding: 5px;
}

<div class="container">
  <div class="item" style="background-color:pink;">foobar foobar foobar foobar foobar foobar</div>
  <div class="item" style="background-color:grey;">quux quux quux quux quux quux quux</div>
</div>

更多信息：https://stackoverflow.com/a/47887186/3597276