Как добавить линию между строками flex box?

Question

Есть ли возможность добавить разделенные строки между строками flex box?

Или есть какое-нибудь другое решение для этого?

Добавление границы ко всем элементам - это не вариант, как вы можетесмотрите в примере.

.container{
  width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
      padding: 16px;
    height: 65px;
    /* this is bab solution*/
    border-bottom: 1px solid #2662c3;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Ссылка .

Answer 1

Вы можете использовать рамку для каждого item, хотя вам нужен один из их псевдоэлементов, с абсолютным позиционированием вверху, полной шириной и установкой overflow: hidden на container.

Нижняя сторона сэто то, что им нужно выровнять по верху (или снизу), иначе «граница» может сломаться.

С другой стороны, он будет динамически перемещаться с содержимым элементов, поэтому одна строка может бытьвыше другого.

Фрагмент стека

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
    overflow: hidden;              /*  added  */
}

.item{
    position: relative;            /*  added  */
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
    margin-bottom: 1px;            /* compensate for border */
}

.item.higher{
    height: 95px;
}

.item::after{
    content: ' ';
    position: absolute;
    left: 0;
    top: -1px;
    width:100vw;
    border-top: 1px solid #2662c3;
}

.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

---

Другим способом, при котором граница будет корректироваться с различной высотой строки, будет использование псевдоэлемента на container, ииспользуя order, поместите его между 2 рядами.

Недостатком этого является то, что существует только 2 псевдо и будет обрабатываться только до 3 строк.

Фрагмент стека

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
}

.container::before{
    content: ' ';
    width:100%;
    border-top: 1px solid #2662c3;
    order: 1;
}

.container .item:nth-child(n+3){
    order: 1;
}

.item.higher{
    height: 95px;
}
.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

---

Для более чем 3 строк необходимо добавить дополнительный элемент, либо в сочетании с псевдо, либо нет, здесь показано, когда нет.

Фрагмент стека

.container{
    width:400px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    place-content: flex-start space-between;
    align-items: flex-start;
    border: 1px solid #2662c3;
}

.item{
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 150px;
    max-width: 150px;
    min-width: 150px;
    padding: 16px;
    height: 65px;
}

.container .border{
    width:100%;
    border-top: 1px solid #2662c3;
}

.container .border:nth-of-type(1){
    order: 1;
}
.container .item:nth-child(n+3){
    order: 2;
}

.container .border:nth-of-type(2){
    order: 3;
}
.container .item:nth-child(n+5){
    order: 4;
}

.container .border:nth-of-type(3){
    order: 5;
}
.container .item:nth-child(n+7){
    order: 6;
}

.item.higher{
    height: 95px;
}
.item{
    background: #eee;              /* for this demo only */
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item higher"></div>
  <div class="item higher"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

  <span class="border"></span>
  <span class="border"></span>
  <span class="border"></span>
</div>

Answer 2

Используйте фоновую окраску для создания линии в центре:

.container {
  width: 400px;
  flex-flow: row wrap;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid #2662c3;
  /*you border*/
  background: linear-gradient(#2662c3, #2662c3) center/100% 1px no-repeat;
}

.item {
  box-sizing: border-box;
  flex: 1 1 150px;
  max-width: 150px;
  padding: 16px;
  height: 65px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>