柔性包裹线用线分开

Question

我想用垂直线分隔两列。我不希望在前七个div的左边增加额外的行，就像我当前的代码一样。

编辑：Flexbox不断变化，因为正在渲染div。我在下面使用的代码是简化版

到目前为止我所拥有的：

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.wrap {
  width: 100px;
  border-left: 1px solid black;
  padding: 5px;
  flex-grow: 1;
}

<div class="flexbox">
 <div class="wrap"><span>First item</span></div>
 <div class="wrap"><span>Second item</span></div>
 <div class="wrap"><span>Third item</span></div>
 <div class="wrap"><span>Fourth item</span></div>
 <div class="wrap"><span>Fifth item</span></div>
 <div class="wrap"><span>Sixth item</span></div>
 <div class="wrap"><span>Seventh item</span></div>
 <div class="wrap"><span>Eigth item</span></div>
 <div class="wrap"><span>Nineth item</span></div>
 <div class="wrap"><span>tenth item</span></div>
 <div class="wrap"><span>Eleventh item</span></div>
</div>

Answer 1

  

我不想要前七个 div左侧的额外行，就像我当前的代码一样。

使用nth-child选择器不选择前七项：

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.wrap {
  width: 100px;
  padding: 5px;
  flex-grow: 1;
}

.flexbox div:nth-child(n+8) {
  border-left: 1px solid black;
}

<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div class="wrap"><span>Eleventh item</span></div>
</div>

Answer 2

只需添加另一个类

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.wrap {
  width: 100px;
  padding: 5px;
  flex-grow: 1;
}

.wrap1 {
  border-left: 1px solid black;
  }

<div class="flexbox">
 <div class="wrap"><span>First item</span></div>
 <div class="wrap"><span>Second item</span></div>
 <div class="wrap"><span>Third item</span></div>
 <div class="wrap"><span>Fourth item</span></div>
 <div class="wrap"><span>Fifth item</span></div>
 <div class="wrap"><span>Sixth item</span></div>
 <div class="wrap"><span>Seventh item</span></div>
 <div class="wrap wrap1"><span>Eigth item</span></div>
 <div class="wrap wrap1"><span>Nineth item</span></div>
 <div class="wrap wrap1"><span>tenth item</span></div>
 <div class="wrap wrap1"><span>Eleventh item</span></div>
</div>

Answer 3

您可以使用容器上的伪元素覆盖第一行。这适用于任何高度和任意数量的元素。

＆＃13;

＆＃13;

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}

.flexbox:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff;
}

.wrap {
  width: 100px;
  border-left: 1px solid black;
  padding: 5px;
  flex-grow: 1;
}

＆＃13;

<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div class="wrap"><span>Eleventh item</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以包裹.flexbox并使用负边距在视觉上隐藏左垂直线。

＆＃13;

＆＃13;

.container {
  padding-left: 1px;
  overflow: hidden;
}

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-left: -2px;
}

.wrap {
  width: 100px;
  border-left: 1px solid black;
  padding: 5px;
  flex-grow: 1;
}

＆＃13;

<div class="container">
  <div class="flexbox">
    <div class="wrap"><span>First item</span></div>
    <div class="wrap"><span>Second item</span></div>
    <div class="wrap"><span>Third item</span></div>
    <div class="wrap"><span>Fourth item</span></div>
    <div class="wrap"><span>Fifth item</span></div>
    <div class="wrap"><span>Sixth item</span></div>
    <div class="wrap"><span>Seventh item</span></div>
    <div class="wrap"><span>Eigth item</span></div>
    <div class="wrap"><span>Nineth item</span></div>
    <div class="wrap"><span>tenth item</span></div>
    <div class="wrap"><span>Eleventh item</span></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;