html - 展开的 flex 盒元素之间的垂直边界

Question

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

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

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

像这样:

我看过Smart borders between flex items – the dumb way , 但是当 flex-box 容器在页面中“ float ”时这不起作用，因为它依赖于隐藏的 -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